import React, {useState} from 'react';
import {Keyboard, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {KeyboardStickyView} from 'react-native-keyboard-controller';
import {
  IconCamera,
  IconFileUpload,
  IconMovie,
  IconPhoto,
  IconVideo,
} from '@tabler/icons-react-native';
import {Dialog} from '@components/_HuGo/Dialog';
import {ButtonVariant, IconButton} from '@components/_HuGo/Button';
import {ListRow} from '@components/_HuGo/List';
import {useTheme} from '@shared/theme';

import {useUploadAttachments} from '../../hooks/useUploadAttachments';
import {styles} from './styles';

interface Props {
  onSetUploadingAttachment: (isUploading: boolean) => void;
}

export function PublishOptions({onSetUploadingAttachment}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [galleryDialogVisible, setGalleryDialogVisible] = useState(false);
  const {
    onSelectDocument,
    onSelectPicture,
    onSelectVideo,
    onTakePicture,
    onTakeVideo,
  } = useUploadAttachments(onSetUploadingAttachment);

  const onCloseGalleryDialog = () => {
    setGalleryDialogVisible(false);
  };

  const onOpenGalleryDialog = () => {
    Keyboard.dismiss();
    // Delay the dialog opening to avoid the animation flickering
    setTimeout(() => setGalleryDialogVisible(true), 250);
  };

  const onPressGalleryOption = () => {
    onCloseGalleryDialog();
    // Delay the action to avoid the dialog closing animation
    setTimeout(onSelectPicture, 250);
  };

  const onPressVideoOption = () => {
    onCloseGalleryDialog();
    // Delay the action to avoid the dialog closing animation
    setTimeout(onSelectVideo, 250);
  };

  const commonIconProps = {
    hitSlop: 8,
    iconColor: theme.neutralTextLighter,
    variant: 'tertiary' as ButtonVariant,
  };

  return (
    <>
      <KeyboardStickyView>
        <View
          style={[
            styles.container,
            {backgroundColor: theme.background.layout.default},
          ]}>
          <IconButton
            {...commonIconProps}
            Icon={IconCamera}
            onPress={onTakePicture}
          />
          <IconButton
            {...commonIconProps}
            Icon={IconVideo}
            onPress={onTakeVideo}
          />
          <IconButton
            {...commonIconProps}
            Icon={IconPhoto}
            onPress={onOpenGalleryDialog}
          />
          <IconButton
            {...commonIconProps}
            Icon={IconFileUpload}
            onPress={onSelectDocument}
          />
        </View>
      </KeyboardStickyView>
      <Dialog
        isVisible={galleryDialogVisible}
        title={t('general.gallery')}
        onClose={onCloseGalleryDialog}>
        <View style={styles.galleryDialog}>
          <ListRow onPress={onPressGalleryOption}>
            <ListRow.Avatar Icon={IconPhoto} />
            <ListRow.Title title={t('general.select_photo')} />
          </ListRow>
          <ListRow onPress={onPressVideoOption}>
            <ListRow.Avatar Icon={IconMovie} />
            <ListRow.Title title={t('general.select_video')} />
          </ListRow>
        </View>
      </Dialog>
    </>
  );
}
