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

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

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

import { useRequiredAuth } from 'src/contexts/JWTContext';
import * as instancesService from 'src/services/instancesService';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

type Props = {
  onClose: () => void;
};

const MINUTES_TO_GIVE_PASSWORD = 5;

const DocumentsOrder = ({ onClose }: Props) => {
  const { t } = useLokaliseTranslation('apps');
  const { enqueueSnackbar } = useHuSnackbar();
  const { instance, updateInstance } = useRequiredAuth();

  const form = useForm({
    defaultValues: {
      mustSignDocumentsInOrder: instance.mustSignDocumentsInOrder,
      passwordInDocumentsTimer: !!instance.passwordInDocumentsTimer,
    },
  });
  const { watch } = form;
  const { mustSignDocumentsInOrder, passwordInDocumentsTimer } = watch();

  const mutation = useMutation(
    () =>
      instancesService.updateInstance(instance.id, {
        mustSignDocumentsInOrder,
        passwordInDocumentsTimer: passwordInDocumentsTimer
          ? MINUTES_TO_GIVE_PASSWORD
          : null,
      }),
    {
      onSuccess: () => {
        enqueueSnackbar({ title: t('general:saved'), variant: 'success' });
        updateInstance!({
          ...instance,
          mustSignDocumentsInOrder,
          passwordInDocumentsTimer: passwordInDocumentsTimer
            ? MINUTES_TO_GIVE_PASSWORD
            : undefined,
        });
      },
      onSettled: onClose,
    },
  );

  const submit = form.handleSubmit(() => mutation.mutateAsync());

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('SETTINGS')}</DialogTitle>
      <DialogContent>
        <FormSwitch
          name="mustSignDocumentsInOrder"
          label={t('REQUIRE_ORDERED_SIGNING')}
          formControlLabelProps={{
            labelPlacement: 'start',
            sx: {
              justifyContent: 'space-between',
              mx: 0,
              width: '100%',
            },
          }}
        />
        <DialogContentText sx={{ mt: 1 }}>
          {t('REQUIRE_ORDERED_SIGNING_TEXT')}
        </DialogContentText>
        <FormSwitch
          name="passwordInDocumentsTimer"
          label={t('REQUEST_AUTHENTICATION')}
          formControlLabelProps={{
            labelPlacement: 'start',
            sx: {
              justifyContent: 'space-between',
              mx: 0,
              width: '100%',
              mt: 2,
            },
          }}
        />
        <DialogContentText sx={{ mt: 1 }}>
          {t('REQUEST_AUTHENTICATION_TEXT')}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('general:cancel')}</Button>
        <Button
          onClick={submit}
          variant="contained"
          loading={form.formState.isSubmitting}
        >
          {t('general:save')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default DocumentsOrder;