import React, {useState} from 'react';
import {View, TouchableOpacity, ViewStyle, StyleProp} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Image} from 'react-native-image-crop-picker';
import MultimediaContainer from '@components/MultimediaContainer';
import OptionsDialog from '@components/OptionsDialog';
import Icon from '@components/Icon';
import Text from '@components/Text';
import ActivityIndicator from '@components/ActivityIndicator';
import {Attachment} from '@interfaces/attachments';
import {SHARED_STRINGS} from '@shared/strings';
import {openGallery, openCamera} from '@shared/utils';

import {styles} from './styles';
import {optionsGallery} from './utils';

interface Props {
  addImage: (asset: Image) => void;
  addVideo: (asset: Image) => void;
  attachments: Attachment[];
  handleDeleteImage: (urlType: string, url: string) => void;
  handleDeleteVideo: (key: string, value: string | number) => void;
  handlePrecheck?: () => boolean;
  style?: StyleProp<ViewStyle>;
  acknowledgementScreen?: boolean;
  editingPost?: boolean;
  width: number;
  disabled?: boolean;
  loading?: boolean;
}

// TODO: Refactor needed for this component and move to `_custom` folder
function AttachmentsButtons({
  addImage,
  addVideo,
  attachments,
  handleDeleteImage,
  handleDeleteVideo,
  handlePrecheck = () => true,
  style,
  acknowledgementScreen,
  editingPost,
  width,
  disabled,
  loading,
}: Props) {
  const {t} = useTranslation();
  const [selectFile, setSelectFile] = useState(false);
  const handleCancel = () => setSelectFile(false);

  return (
    <View style={style}>
      {!disabled && !acknowledgementScreen && (
        <Text variant="body2" style={styles.titleStyle}>
          {t(SHARED_STRINGS.PHOTOS_AND_VIDEOS)}
        </Text>
      )}
      {!disabled && (
        <View style={styles.buttonsContainerStyle}>
          <TouchableOpacity
            onPress={() =>
              handlePrecheck() &&
              openCamera({save: addImage, options: {cropping: true}})
            }
            style={styles.button}>
            <Icon name="photoCamera" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() =>
              handlePrecheck() &&
              openCamera({save: addVideo, options: {mediaType: 'video'}})
            }
            style={styles.button}>
            <Icon name="videocam" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => handlePrecheck() && setSelectFile(true)}
            style={styles.button}>
            <Icon name="image" />
          </TouchableOpacity>
        </View>
      )}
      {disabled && !attachments.length && (
        <Text style={styles.text}>{t(SHARED_STRINGS.EMPTY)}</Text>
      )}
      {!!attachments.length && (
        <View style={styles.paddingVertical}>
          <MultimediaContainer
            attachments={attachments}
            {...(!disabled && {
              onDeleteImage: handleDeleteImage,
              onDeleteVideo: handleDeleteVideo,
            })}
            editingPost={editingPost}
            width={width}
            {...(!disabled && {multimediaWidth: width - 20})}
          />
        </View>
      )}
      {loading && <ActivityIndicator fullScreen size="large" />}
      <OptionsDialog
        visible={selectFile}
        title={t(SHARED_STRINGS.GALLERY)}
        onTouchOutside={handleCancel}
        items={optionsGallery(
          () => {
            handleCancel();
            openGallery({save: addImage, options: {cropping: true}});
          },
          () => {
            handleCancel();
            openGallery({save: addVideo, options: {mediaType: 'video'}});
          },
        )}
      />
    </View>
  );
}

export default AttachmentsButtons;