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

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

import Button from '@material-hu/components/design-system/Buttons/Button';

import { KnowledgeLibraryArticle } from 'src/types/library';
import { hasErrors } from 'src/utils/formUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import BasicDrawer from 'src/components/BasicDrawer';

import useDuplicateLibrary from '../hooks/useDuplicateLibrary';

import CancelDuplicateLibraryModal from './CancelDuplicateLibraryModal';
import DuplicateLibraryForm from './DuplicateLibraryForm';

export type DuplicateLibraryDrawerProps = {
  onClose: () => void;
  onCancel?: () => void;
  onSubmit?: () => void;
  library: KnowledgeLibraryArticle;
};

export const DuplicateLibraryDrawer = ({
  library,
  onClose,
  onCancel = () => null,
  onSubmit = () => null,
}: DuplicateLibraryDrawerProps) => {
  const { t } = useLokaliseTranslation('libraries');

  const duplicateMutation = useDuplicateLibrary(library);

  const form = useForm({
    defaultValues: {
      title: '',
      parentId: library.parentId,
    },
  });

  const { handleSubmit, reset, formState } = form;

  const { modal: cancelModal, showModal: showCancelModal } = useModal(
    CancelDuplicateLibraryModal,
    { maxWidth: 'sm', fullWidth: true },
  );

  const handleCancel = () =>
    showCancelModal({
      onConfirm: () => {
        onClose();
        onCancel();
        reset();
      },
    });

  const submit = handleSubmit(values => {
    onSubmit();
    duplicateMutation.mutate(values, {
      onSuccess: () => {
        onClose();
        reset();
      },
    });
  });

  return (
    <FormProvider {...form}>
      {cancelModal}
      <BasicDrawer.Container
        component="form"
        onSubmit={submit}
      >
        <DuplicateLibraryForm library={library} />
        <BasicDrawer.Actions sx={{ p: 0 }}>
          <Button
            id="duplicate-library-cancel-button"
            variant="text"
            onClick={handleCancel}
            fullWidth
          >
            {t('general:cancel')}
          </Button>
          <Button
            id="duplicate-library-accept-button"
            type="submit"
            variant="contained"
            disabled={formState.isSubmitted && hasErrors(formState.errors)}
            loading={duplicateMutation.isLoading}
            fullWidth
          >
            {t('general:duplicate')}
          </Button>
        </BasicDrawer.Actions>
      </BasicDrawer.Container>
    </FormProvider>
  );
};

export default DuplicateLibraryDrawer;