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

import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';

import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import * as libraryService from 'src/services/libraryService';
import { KnowledgeLibraryArticle } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormRichEditor from 'src/components/FormInputs/FormRichEditor';

import Attachments from './Attachments';

type Props = {
  article?: KnowledgeLibraryArticle;
  refetch?: Function;
};

const ArticleLibraryEdit = ({ article, refetch }: Props) => {
  const { t } = useLokaliseTranslation('general');
  const { enqueueSnackbar } = useHuSnackbar();

  const form = useForm({
    defaultValues: {
      body: article?.body || '',
      attachments: article?.attachments || [],
    },
  });

  const {
    formState: {
      dirtyFields: { body: isDirtyBody },
    },
  } = form;

  const updateLibraryBodyMutation = useMutation(
    async ({ articleId, body }: { articleId: number; body: string }) =>
      libraryService.updateLibraryBody(articleId, body),
    {
      onSuccess: () => {
        enqueueSnackbar({
          title: t('inputs.description.updated'),
          variant: 'success',
        });
        form.reset(form.getValues());
      },
    },
  );

  const handleChangeBody = (value: string) =>
    form.handleSubmit(() => {
      if (isDirtyBody) {
        updateLibraryBodyMutation.mutate({
          articleId: article.id,
          body: value,
        });
      }
    })();

  return (
    <FormProvider {...form}>
      <Container
        maxWidth="xl"
        sx={{ py: 2, width: '700px', pl: 2 }}
      >
        <FormRichEditor
          name="body"
          handleBlur={handleChangeBody}
        />
        <Box sx={{ mt: 5 }}>
          <Attachments
            articleId={article.id}
            attachments={article.attachments}
            refetch={refetch}
          />
        </Box>
      </Container>
    </FormProvider>
  );
};

export default ArticleLibraryEdit;