import { FormProvider, useForm } from 'react-hook-form';

import { useModal } from '@material-hu/hooks/useModal';

import { KnowledgeLibraryArticle } from 'src/types/library';
import FormCoverPicture from 'src/components/FormInputs/FormCoverPicture';

import useUpdateCoverPicture from '../hooks/useUpdateCoverPicture';

import RemoveCoverPictureModal from './RemoveCoverPictureModal';

export type LibraryCoverPictureProps = {
  library: KnowledgeLibraryArticle;
};

export const LibraryCoverPicture = ({ library }: LibraryCoverPictureProps) => {
  const form = useForm({
    defaultValues: {
      coverPicture: library.coverPicture
        ? { url: library.coverPicture, file: null }
        : null,
    },
  });

  const {
    modal: removeCoverPictureModal,
    showModal: showRemoveCoverPictureModal,
  } = useModal(RemoveCoverPictureModal);

  const updateMutation = useUpdateCoverPicture(library);

  const handleDelete = () => showRemoveCoverPictureModal({ library });
  const handleUpdate = (file: File) => updateMutation.mutate({ file });

  return (
    <FormProvider {...form}>
      {removeCoverPictureModal}
      <FormCoverPicture
        name="coverPicture"
        onDelete={handleDelete}
        onUpdate={handleUpdate}
      />
    </FormProvider>
  );
};

export default LibraryCoverPicture;