import { type FC } from 'react';
import { useFormContext } from 'react-hook-form';

import { type CompleteFile } from '../../../types/attachments';
import FileCard from '../../design-system/FileCard';

import { type FieldValues } from './CreatePost';

type Props = { item: CompleteFile };
const FileCarrouselItemEditable: FC<Props> = ({ item }) => {
  const form = useFormContext<FieldValues>();

  const isLoading = !item.attachment;

  return (
    <FileCard
      file={item.file}
      sx={{ width: '100%' }}
      attachment={item.attachment}
      status={isLoading ? 'uploading' : 'success'}
      showDownloadButton={false}
      onRemove={() =>
        form.setValue(
          'files',
          form.getValues('files').filter(f => f !== item),
          { shouldDirty: true },
        )
      }
      onReupload={() => {}}
    />
  );
};

export default FileCarrouselItemEditable;