import React, {forwardRef, memo, RefObject, useMemo} from 'react';
import {NativeSyntheticEvent, StyleSheet} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconGif} from '@tabler/icons-react-native';
import {
  IconButton,
  InputClassic,
  InputClassicProps,
  TextInputType,
} from '@components';
import {
  useAiSummary,
  useInputValue,
  useMessageActionsContext,
} from '@modules/chats/contexts';
import {CHATS_SPACING} from '@modules/chats/utils';
import {
  AiSummaryButton,
  AiSummaryProcessingText,
} from '@modules/chats/screens/ChatMessages/components/ChatFooter/components/AiSummary';
import {SPACING, useTheme} from '@shared/theme';
import {useFeatureFlag} from '@stores/featureFlags';

import {InputTagsChat} from './InputTagsChats';

interface Props {
  enableMentions?: boolean;
  onDialogWillOpen?: () => void;
  onPasteImage?: (
    e: NativeSyntheticEvent<{uri: string; bytes: number}>,
  ) => void;
  onGifPress?: () => void;
}

const ChatInputComponent = forwardRef<TextInputType, Props>(
  ({enableMentions, onDialogWillOpen, onPasteImage, onGifPress}, ref) => {
    const {t} = useTranslation();
    const {theme} = useTheme();
    const [message, setMessage] = useInputValue();
    const {isEditing} = useMessageActionsContext();
    const isAiSummaryEnabled = useFeatureFlag('CHATS_V2_VOICENOTES_CEO_AI');
    const {isActive: isAiSummaryActive, isProcessing: isAiSummaryProcessing} =
      useAiSummary();
    const isInputEmpty = message.length === 0;
    const showGifButton = !isEditing && isInputEmpty && !isAiSummaryActive;
    const showAiSummaryButton = isAiSummaryEnabled && isInputEmpty;

    const inputProps = useMemo((): InputClassicProps & {
      ref: RefObject<TextInputType>;
    } => {
      return {
        ref: ref as RefObject<TextInputType>,
        value: message,
        onChangeText: setMessage,
        scrollEnabled: true,
        returnKeyType: 'default',
        multiline: true,
        autoComplete: 'off',
        style: styles.input,
        withClearButton: false,
        disableWithoutStyles: isAiSummaryProcessing,
        placeholder: !isAiSummaryActive
          ? t('chat.messages.write_message')
          : undefined,
        onPasteImage,
        RightComponent: showAiSummaryButton ? (
          <AiSummaryButton />
        ) : showGifButton ? (
          <IconButton
            Icon={IconGif}
            iconColor={theme.text.neutral.default}
            variant="flat"
            onPress={onGifPress}
            useGestureHandler
          />
        ) : null,
      };
    }, [
      ref,
      message,
      setMessage,
      t,
      onPasteImage,
      isAiSummaryActive,
      isAiSummaryProcessing,
      showAiSummaryButton,
      showGifButton,
      onGifPress,
      theme.text.neutral.default,
    ]);

    return (
      <>
        {enableMentions ? (
          <InputTagsChat {...inputProps} onDialogWillOpen={onDialogWillOpen} />
        ) : (
          <InputClassic {...inputProps} />
        )}
        <AiSummaryProcessingText />
      </>
    );
  },
);

export const ChatInput = memo(ChatInputComponent);

const styles = StyleSheet.create({
  input: {
    alignItems: 'center',
    maxHeight: CHATS_SPACING.inputMaxHeight,
    minHeight: CHATS_SPACING.inputMinHeight,
    paddingVertical: 0,
    paddingHorizontal: SPACING.x1,
  },
});