import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconCamera,
  IconCheck,
  IconMicrophone,
  IconSend,
} from '@tabler/icons-react-native';
import {GestureDetector} from 'react-native-gesture-handler';
import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
import {IconButton, Pressable} from '@components';
import {useAiSummary, useAudioRecordingAnimated} from '@modules/chats/contexts';
import {useTheme} from '@shared/theme';
import {useIsAudioSessionBusy} from '@stores/audioSession';

import RecordingHintBubble from '../RecordingHintBubble';
import VoiceRecordingLocker from '../VoiceRecordingLocker';
import {styles} from './styles';
import VoiceRecordingPanel from '../VoiceRecordingPanel';

const MIC_BUTTON_HIT_SLOP = {
  top: 10,
  bottom: 10,
  left: 10,
  right: 10,
};

interface Props {
  showEditSubmitButton: boolean;
  showSendButton: boolean;
  isSendDisabled: boolean;
  onSubmitEdition: () => void;
  onSendPress: () => void;
  onSendAudioPress: () => void;
  onCameraPress: () => void;
}

export const FooterRightContent = memo(
  ({
    showEditSubmitButton,
    showSendButton,
    onSubmitEdition,
    onSendPress,
    onSendAudioPress,
    onCameraPress,
    isSendDisabled,
  }: Props) => {
    const {t} = useTranslation();
    const {iconSizes, theme} = useTheme();
    const isAudioSessionBusy = useIsAudioSessionBusy();
    const {isProcessing: isAiSummaryProcessing} = useAiSummary();
    const {
      isLocked,
      isPressing,
      isCanceling,
      translationValueY,
      gesture,
      isHintVisible,
      hideHint,
    } = useAudioRecordingAnimated();

    const rightIconPressingStyle = useAnimatedStyle(() => {
      return {
        opacity: interpolate(isPressing.value, [0, 1], [1, 0]),
      };
    }, []);

    if (showEditSubmitButton) {
      return (
        <IconButton
          Icon={IconCheck}
          variant="primary"
          onPress={onSubmitEdition}
          disabled={isSendDisabled}
          testID="chat-footer-confirm-edit-button"
          accessibilityLabel={t('chat.edit.confirm_button')}
          useGestureHandler
        />
      );
    }

    if (showSendButton || isAiSummaryProcessing) {
      return (
        <View style={styles.sendButtonContainer}>
          <IconButton
            Icon={IconSend}
            variant="primary"
            onPress={onSendPress}
            accessibilityLabel={t('general.send')}
            disabled={isSendDisabled || isAiSummaryProcessing}
            useGestureHandler
          />
        </View>
      );
    }

    return (
      <>
        <VoiceRecordingPanel onSendPress={onSendAudioPress} />
        <Animated.View
          style={[styles.rightIconWrapper, rightIconPressingStyle]}>
          <Pressable
            onPress={onCameraPress}
            style={styles.cameraButton}
            useGestureHandler>
            <IconCamera
              size={iconSizes.x6}
              color={theme.text.neutral.default}
            />
          </Pressable>
          <GestureDetector gesture={gesture}>
            <View hitSlop={MIC_BUTTON_HIT_SLOP} style={styles.micWrapper}>
              <IconMicrophone
                size={iconSizes.x6}
                color={
                  isAudioSessionBusy
                    ? theme.text.neutral.disabled
                    : theme.text.neutral.default
                }
              />
            </View>
          </GestureDetector>
        </Animated.View>
        {isHintVisible && <RecordingHintBubble onHide={hideHint} />}
        <VoiceRecordingLocker
          isLocked={isLocked}
          isPressing={isPressing}
          isCanceling={isCanceling}
          translationY={translationValueY}
        />
      </>
    );
  },
);
