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 ChatsConfiguration = ({ onClose }: Props) => {
  const { t } = useLokaliseTranslation('apps');
  const { enqueueSnackbar } = useHuSnackbar();
  const { instance, updateInstance } = useRequiredAuth();

  const form = useForm({
    defaultValues: {
      allowAttachmentsInChats: instance.allowAttachmentsInChats,
      allowCreateChats: instance.allowCreateChats,
    },
  });

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

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

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('SETTINGS')}</DialogTitle>
      <DialogContent>
        <FormSwitch
          name="allowAttachmentsInChats"
          label={t('CHAT_ATTACH_FILES')}
          formControlLabelProps={{
            labelPlacement: 'start',
            sx: {
              justifyContent: 'space-between',
              mx: 0,
              width: '100%',
            },
          }}
        />
        <DialogContentText>{t('CHAT_ATTACH_FILES_TEXT')}</DialogContentText>
      </DialogContent>
      <DialogContent>
        <FormSwitch
          name="allowCreateChats"
          label={t('CHAT_START_NEW_CONVERSATIONS')}
          formControlLabelProps={{
            labelPlacement: 'start',
            sx: {
              justifyContent: 'space-between',
              mx: 0,
              width: '100%',
            },
          }}
        />
        <DialogContentText>
          {t('CHAT_START_NEW_CONVERSATIONS_TEXT')}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('CANCEL')}</Button>
        <Button
          onClick={submit}
          variant="contained"
          loading={form.formState.isSubmitting}
        >
          {t('SAVE')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default ChatsConfiguration;