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

import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import Stack from '@material-hu/mui/Stack';

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

import { KnowledgeLibraryArticle } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredStringRule } from 'src/utils/validation';

import FormImageMenu from 'src/components/FormInputs/FormImageMenu';
import FormSegmentation from 'src/components/FormInputs/FormSegmentation';
import FormTextField from 'src/components/FormInputs/FormTextField';

import useCreateLibrary from '../hooks/useCreateLibrary';
import useUpdateLibrary from '../hooks/useUpdateLibrary';
import { formatLibraryDefaultValues } from '../utils';

type Props = {
  library?: KnowledgeLibraryArticle;
  parent?: KnowledgeLibraryArticle;
  width?: number;
  onClose: Function;
};

const Library = ({ library, width, onClose, parent }: Props) => {
  const { t } = useLokaliseTranslation('libraries');

  const hasParent = !!library?.parentId;
  const isEditing = !!library;

  const form = useForm({
    defaultValues: formatLibraryDefaultValues(library, parent),
    mode: 'onChange',
  });

  const {
    formState: { isValid },
    handleSubmit,
  } = form;

  const updateMutation = useUpdateLibrary(parent);
  const createMutation = useCreateLibrary();

  const libraryMutation = isEditing ? updateMutation : createMutation;

  const handleSave = handleSubmit(values =>
    libraryMutation.mutate(values, {
      onSuccess: () => onClose(),
    }),
  );

  const type = hasParent ? 'article' : 'library';
  const action = isEditing ? 'edit' : 'new';

  const title = t(`${type}.${action}`);

  return (
    <>
      <DialogTitle
        color="textPrimary"
        variant="h5"
      >
        {title}
      </DialogTitle>
      <DialogContent>
        <FormProvider {...form}>
          <Stack spacing={3}>
            <FormImageMenu
              name="icon"
              width={width}
            />
            <FormTextField
              name="title"
              label={t('general:inputs.title.label')}
              required
              rules={{ validate: validateRequiredStringRule }}
            />
            {hasParent && (
              <HuAlert
                title={t('article.segmentation.info.title')}
                description={t('article.segmentation.info.description')}
                severity="highlight"
              />
            )}
            <FormSegmentation
              name="segmentation"
              segmentationErrorMessage={t('article.segmentation.required')}
              useAudienceApi
            />
          </Stack>
        </FormProvider>
      </DialogContent>
      <DialogActions sx={{ justifyContent: 'flex-end' }}>
        <Button
          loading={libraryMutation.isLoading}
          onClick={handleSave}
          variant="contained"
          sx={{ ml: 2 }}
          disabled={!isValid}
        >
          {t('general:save')}
        </Button>
      </DialogActions>
    </>
  );
};

export default Library;