import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCamera, IconFile, IconPhoto} from '@tabler/icons-react-native';
import {Spinner} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import UploadButton from '../UploadButton';

interface Props {
  onPressDocument: () => void;
  onPressImage: () => void;
  onPressCamera: () => void;
  isLoading: boolean;
}

function MultipleFileAttachmentsInput({
  onPressCamera,
  onPressDocument,
  onPressImage,
  isLoading,
}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <View style={styles.container}>
      {isLoading ? (
        <Spinner />
      ) : (
        <>
          <UploadButton onPress={onPressDocument} name={t('general.document')}>
            <IconFile color={theme.icon.neutral.brand} size={iconSizes.x6} />
          </UploadButton>
          <UploadButton onPress={onPressImage} name={t('general.image')}>
            <IconPhoto color={theme.icon.neutral.brand} size={iconSizes.x6} />
          </UploadButton>
          <UploadButton onPress={onPressCamera} name={t('general.camera')}>
            <IconCamera color={theme.icon.neutral.brand} size={iconSizes.x6} />
          </UploadButton>
        </>
      )}
    </View>
  );
}

export default MultipleFileAttachmentsInput;