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 FormSegmentation from 'src/components/FormInputs/FormSegmentation';

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

export type ViewPermissionsModalProps = {
  library: KnowledgeLibraryArticle;
  onClose: Function;
};

export const ViewPermissionsModal = ({
  library,
  onClose,
}: ViewPermissionsModalProps) => {
  const { t } = useLokaliseTranslation('libraries');

  const hasParent = !!library.parent?.id;

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

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

  const updateMutation = useUpdateLibrary(library);

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

  return (
    <>
      <DialogTitle
        color="textPrimary"
        variant="h5"
      >
        {t('general:permissions.view.title')}
      </DialogTitle>
      <DialogContent>
        <FormProvider {...form}>
          <Stack spacing={3}>
            {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={updateMutation.isLoading}
          onClick={handleSave}
          variant="contained"
          sx={{ ml: 2 }}
          disabled={!isValid}
        >
          {t('general:save')}
        </Button>
      </DialogActions>
    </>
  );
};

export default ViewPermissionsModal;