import { useFormContext } from 'react-hook-form';
import { useMutation } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import Alert from '@material-hu/mui/Alert';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import CardHeader from '@material-hu/mui/CardHeader';
import Collapse from '@material-hu/mui/Collapse';
import FormHelperText from '@material-hu/mui/FormHelperText';
import Stack from '@material-hu/mui/Stack';

import NewModal from '@material-hu/components/deprecated/NewModal';
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 useGeneralError from 'src/hooks/useGeneralError';
import useNewTheme from 'src/hooks/useNewTheme';
import * as instancesService from 'src/services/instancesService';
import { updateTerms } from 'src/services/termsService';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

import { type FieldValues } from '../../form';

const TermsAndConditions = () => {
  const { t } = useLokaliseTranslation('settings');
  const NewThemeProvider = useNewTheme();
  const { instance } = useRequiredAuth();
  const { enqueueSnackbar } = useHuSnackbar();
  const showGeneralError = useGeneralError();

  const {
    formState: { errors },
    watch,
  } = useFormContext<FieldValues>();
  const { hasTermsAndConditions, terms } = watch();

  const mutation = useMutation(
    async () => {
      if (terms && hasTermsAndConditions) {
        await updateTerms(terms);
      }
      return instancesService.updateInstance(instance.id, {
        hasTermsAndConditions,
      });
    },
    {
      onSuccess: () => {
        closeModal();
        enqueueSnackbar({
          title: t('GENERAL.UPDATED_SUCCESS'),
          variant: 'success',
        });
      },
      onError: (err: any) => {
        showGeneralError(err);
      },
    },
  );

  const handleSave = () => {
    if (hasTermsAndConditions) {
      showModal();
    } else {
      mutation.mutate();
    }
  };

  const onClose = () => closeModal();

  const { modal, showModal, closeModal } = useModal(() => (
    <NewModal
      title={t('GENERAL.UPDATE_TERMS_TITLE')}
      textBody={t('GENERAL.UPDATE_TERMS_INFO')}
      primaryButtonProps={{
        loading: mutation.isLoading,
        children: t('GENERAL:CONFIRM'),
        onClick: () => mutation.mutate(),
      }}
      secondaryButtonProps={{
        children: t('GENERAL:CANCEL'),
        onClick: onClose,
      }}
      onClose={closeModal}
    />
  ));

  return (
    <NewThemeProvider>
      {modal}
      <Stack sx={{ gap: 2 }}>
        <Card>
          <CardHeader
            title={t('GENERAL.TERMS_CONDITIONS')}
            subheader={t('GENERAL.TERMS_INFO')}
          />
          <CardContent>
            <FormSwitch
              name="hasTermsAndConditions"
              label={t('GENERAL.SHOW_TERMS')}
            />
            <Collapse in={hasTermsAndConditions}>
              <FormHelperText>{t('GENERAL.TERMS')}</FormHelperText>
              <FormRichEditor
                name="terms"
                rules={{ validate: value => !hasTermsAndConditions || !!value }}
              />
              {errors.terms && (
                <Alert
                  severity="error"
                  sx={{ mt: 1 }}
                >
                  {t('GENERAL.TERMS_ERROR')}
                </Alert>
              )}
            </Collapse>
          </CardContent>
        </Card>
        <Button
          variant="contained"
          disabled={mutation.isLoading || (hasTermsAndConditions && !terms)}
          onClick={handleSave}
          sx={{ alignSelf: 'flex-end' }}
        >
          {t('GENERAL:SAVE')}
        </Button>
      </Stack>
    </NewThemeProvider>
  );
};

export default TermsAndConditions;