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 Stack from '@material-hu/mui/Stack';

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

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

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

const filesConfigurationFormFields = {
  hideFileDownload: 'hideFileDownload',
} as const;

const FilesConfiguration = ({ onClose }: Props) => {
  const { t } = useLokaliseTranslation(['apps', 'backoffice_only']);
  const { enqueueSnackbar } = useHuSnackbar();
  const { instance, updateInstance } = useAuth();

  const form = useForm({
    defaultValues: {
      hideFileDownload: instance?.hideFileDownload ?? false,
    },
  });

  const mutation = useMutation(
    () => instancesService.updateInstance(instance?.id!, form.getValues()),
    {
      onSuccess: response => {
        enqueueSnackbar({ title: t('saved'), variant: 'success' });
        updateInstance?.(response.data);
      },
      onSettled: onClose,
    },
  );

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

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('settings')}</DialogTitle>
      <DialogContent>
        <Stack sx={{ gap: 2 }}>
          <Stack>
            <FormSwitcher
              name={filesConfigurationFormFields.hideFileDownload}
              switcherProps={{
                title: t(
                  'backoffice_only:files_app_options.hide_file_download',
                ),
              }}
            />
            <DialogContentText>
              {t(
                'backoffice_only:files_app_options.hide_file_download_description',
              )}
            </DialogContentText>
          </Stack>
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('cancel')}</Button>
        <Button
          onClick={submit}
          variant="contained"
          loading={form.formState.isSubmitting}
        >
          {t('save')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default FilesConfiguration;