import React, {useCallback, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {IconPhone} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {Button} from '@components';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {getButtonStyle} from './styles';

export function CallJoinButton({
  callId,
  externalCallId,
  disabled = false,
}: {
  callId: string;
  externalCallId?: string;
  disabled?: boolean;
}) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const {navigate} = useNavigation();
  const buttonStyle = useMemo(
    () => getButtonStyle(theme.successGraphic),
    [theme.successGraphic],
  );

  const joinCall = useCallback(() => {
    navigate(Screens.CALLS_CALL, {
      callId: callId,
      isCaller: false,
      externalCallId,
    });
  }, [callId, externalCallId, navigate]);

  return (
    <Button
      style={buttonStyle}
      IconLeft={IconPhone}
      size="sm"
      text={t('calls.join')}
      disabled={disabled}
      onPress={joinCall}
    />
  );
}