import React, {useCallback, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {useNavigation} from '@react-navigation/native';
import {IconPhone, IconVideo} from '@tabler/icons-react-native';
import {Typography, Dialog} from '@components';
import {Navigation} from '@interfaces/navigation';
import {createCall} from '@modules/calls/services';
import {CallMobileAudio} from '@modules/calls/interfaces';
import {setGroupCall} from '@modules/calls/store';
import {GroupCall} from '@modules/calls/store/slices/callSlice';
import {useCallPermissions} from '@modules/calls/hooks/useCallPermissions';
import {Screens} from '@shared/constants';
import {getUlid, openSettings} from '@shared/utils';

import {CallStartButton} from '../CallStartButton';
import {styles} from './styles';

// TODO: remove chatId logic when chatsv1 is deprecated
export function CallStartButtons({
  chatId,
  channel,
  groupCall = null,
}: {
  chatId?: number;
  channel?: string;
  groupCall?: Nullable<GroupCall>;
}) {
  // On Android to keep call alive in background it is necessary to have these permissions granted before starting the call
  const {checkAndRequestPermissions} = useCallPermissions();
  const [dialogVisible, setDialogVisible] = useState(false);
  const [pressedButton, setPressedButton] = useState<'video' | 'audio' | null>(
    null,
  );
  const {t} = useTranslation();
  const navigation = useNavigation<Navigation['navigation']>();

  const createCallMutation = useMutation(createCall, {
    onSuccess: (call, variables) => {
      navigation.push(Screens.CALLS_CALL, {
        callId: call.id,
        isCaller: true,
        initialCameraEnabled:
          variables?.initializationConfig?.cameraEnabled ??
          call.initializationConfig?.cameraEnabled,
      });
    },
  });

  const onVideoStartCall = useCallback(async () => {
    setPressedButton('video');
    const granted = await checkAndRequestPermissions();
    if (granted) {
      setGroupCall(groupCall);
      createCallMutation.mutate({
        chatId,
        channel,
        initializationConfig: {
          cameraEnabled: true,
          mobileAudio: CallMobileAudio.Earpiece,
        },
        idempotencyKey: getUlid(),
      });
    } else {
      setPressedButton(null);
      setDialogVisible(true);
    }
  }, [
    channel,
    chatId,
    checkAndRequestPermissions,
    createCallMutation,
    groupCall,
    setDialogVisible,
  ]);
  const onAudioStartCall = useCallback(async () => {
    setPressedButton('audio');
    const granted = await checkAndRequestPermissions();
    // TODO: remove chatId logic when chatsv1 is deprecated
    if (granted) {
      setGroupCall(groupCall);
      createCallMutation.mutate({
        chatId,
        channel,
        initializationConfig: {
          cameraEnabled: false,
          mobileAudio: CallMobileAudio.Earpiece,
        },
        idempotencyKey: getUlid(),
      });
    } else {
      setPressedButton(null);
      setDialogVisible(true);
    }
  }, [
    channel,
    chatId,
    checkAndRequestPermissions,
    createCallMutation,
    groupCall,
    setDialogVisible,
  ]);

  const handleOnClose = () => {
    setDialogVisible(false);
    setPressedButton(null);
  };

  return (
    <View style={styles.container}>
      <CallStartButton
        onPress={onVideoStartCall}
        isLoading={createCallMutation.isLoading && pressedButton === 'video'}
        icon={IconVideo}
      />
      <CallStartButton
        onPress={onAudioStartCall}
        isLoading={createCallMutation.isLoading && pressedButton === 'audio'}
        icon={IconPhone}
      />
      <Dialog
        title={t('calls.permissions_required')}
        isVisible={dialogVisible}
        onClose={handleOnClose}
        footer={{
          primaryButton: {
            text: t('calls.open_settings'),
            onPress: openSettings,
          },
          secondaryButton: {
            text: t('general.cancel'),
            onPress: handleOnClose,
          },
        }}>
        <Typography>{t('calls.permissions_required_description')}</Typography>
      </Dialog>
    </View>
  );
}