import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Animated from 'react-native-reanimated';
import {
  IconCamera,
  IconFile,
  IconGif,
  IconPhoto,
} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {UserPermissions} from '@interfaces/user';
import {useMentions} from '@modules/chats/contexts';
import {usePermission} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {useFeatureFlag} from '@stores/featureFlags';

import {
  useDialogAnimatedStyle,
  useDialogVisibility,
} from '../AnimationProvider';
import PressableWrapper from './components/PressableWrapper';
import {styles} from './styles';

interface Props {
  onSelectFile: () => void;
  onSelectImages: () => void;
  onCameraPress: () => void;
  onSelectGif: () => void;
}

const ChatDialogComponent = ({
  onSelectFile,
  onSelectImages,
  onCameraPress,
  onSelectGif,
}: Props) => {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const animatedStyle = useDialogAnimatedStyle();
  const {isDialogVisible} = useDialogVisibility();
  const isBlockFilesEnabled = usePermission(
    UserPermissions.BLOCK_FILES_CHATS_V2,
  );
  const isAiSummaryEnabled = useFeatureFlag('CHATS_V2_VOICENOTES_CEO_AI');
  const {chatFooterHeight} = useMentions();
  const showGifOption = isAiSummaryEnabled; // Only show GIF option if AI summary is enabled (new UI)

  return (
    <Animated.View
      pointerEvents={isDialogVisible ? 'auto' : 'none'}
      style={[
        styles.animatedContainer,
        {
          backgroundColor: theme.background.layout.default,
          bottom: chatFooterHeight,
        },
        animatedStyle,
      ]}>
      <View
        style={[
          styles.dialog,
          {backgroundColor: theme.background.layout.tertiary},
        ]}>
        <View
          style={[
            styles.handle,
            {backgroundColor: theme.border.neutral.default},
          ]}
        />
        <View style={styles.content}>
          {!isBlockFilesEnabled && (
            <View style={styles.multimediaButtonsContainer}>
              <PressableWrapper
                onPress={onSelectFile}
                style={styles.multimediaButtonContainer}
                backgroundColor={theme.background.layout.brand}
                accessibilityLabel={`${t('general.select')} ${t(
                  'chat.files.documents',
                )}`}>
                <IconFile
                  color={theme.text.neutral.brand}
                  size={iconSizes.x6}
                />
              </PressableWrapper>
              <Typography variant="s" adjustsFontSizeToFit numberOfLines={1}>
                {t('chat.files.documents')}
              </Typography>
            </View>
          )}
          <View style={styles.multimediaButtonsContainer}>
            <PressableWrapper
              onPress={onSelectImages}
              style={styles.multimediaButtonContainer}
              backgroundColor={theme.background.layout.brand}
              accessibilityLabel={`${t('general.select')} ${t(
                'chat.files.gallery',
              )}`}>
              <IconPhoto color={theme.text.neutral.brand} size={iconSizes.x6} />
            </PressableWrapper>
            <Typography variant="s" adjustsFontSizeToFit numberOfLines={1}>
              {t('general.gallery')}
            </Typography>
          </View>
          {showGifOption && (
            <View style={styles.multimediaButtonsContainer}>
              <PressableWrapper
                onPress={onSelectGif}
                style={styles.multimediaButtonContainer}
                backgroundColor={theme.background.layout.brand}
                accessibilityLabel={`${t('general.select')} ${t(
                  'chat.files.gif',
                )}`}>
                <IconGif color={theme.text.neutral.brand} size={iconSizes.x6} />
              </PressableWrapper>
              <Typography variant="s" adjustsFontSizeToFit numberOfLines={1}>
                {t('chat.files.gif')}
              </Typography>
            </View>
          )}
          <View style={styles.multimediaButtonsContainer}>
            <PressableWrapper
              onPress={onCameraPress}
              style={styles.multimediaButtonContainer}
              backgroundColor={theme.background.layout.brand}
              accessibilityLabel={`${t('general.select')} ${t(
                'chat.files.camera',
              )}`}>
              <IconCamera
                color={theme.text.neutral.brand}
                size={iconSizes.x6}
              />
            </PressableWrapper>
            <Typography variant="s" adjustsFontSizeToFit numberOfLines={1}>
              {t('general.camera')}
            </Typography>
          </View>
        </View>
      </View>
    </Animated.View>
  );
};

export const ChatDialog = memo(ChatDialogComponent);
