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

import { useDrawer } from '@material-hu/hooks/useDrawer';
import { IconCirclePlus } from '@material-hu/icons/tabler';

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

import { createReferral } from 'src/services/referralService';
import { ReferralBody } from 'src/types/referrals';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { referralKeys } from '../queries';

import ReferralForm from './ReferralForm';

const NewReferral = () => {
  const { t } = useLokaliseTranslation('referrals');
  const { enqueueSnackbar } = useHuSnackbar();
  const queryClient = useQueryClient();

  const form = useForm({
    defaultValues: {
      referrerName: '',
      refereeName: '',
      refereeEmail: '',
      refereeRole: '',
      company: '',
      refereePhoneNumber: '',
    },
    mode: 'onChange',
  });

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

  const { mutate, isLoading } = useMutation(
    (body: ReferralBody): any => createReferral(body),
    {
      onSuccess: () => {
        enqueueSnackbar({ title: t('referral_created'), variant: 'success' });
        reset();
        closeNewReferralForm();
        queryClient.invalidateQueries(referralKeys.allList());
      },
    },
  );

  const submit = ({ refereePhoneNumber, ...values }: ReferralBody) => {
    const body = {
      refereePhoneNumber: refereePhoneNumber || undefined,
      ...values,
    } as ReferralBody;
    mutate(body);
  };

  const handleClose = () => {
    reset();
    closeNewReferralForm();
  };

  const {
    showDrawer: showNewReferralForm,
    drawer: newReferralForm,
    closeDrawer: closeNewReferralForm,
  } = useDrawer(ReferralForm, {
    title: t('ADD_REFERRAL'),
    primaryButtonProps: {
      children: t('refer'),
      onClick: handleSubmit(submit),
      disabled: !isValid || isLoading,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: handleClose,
    },
    onClose: handleClose,
  });

  return (
    <FormProvider {...form}>
      {newReferralForm}
      <Button
        sx={{ alignSelf: 'flex-end' }}
        startIcon={<IconCirclePlus />}
        variant="outlined"
        size="medium"
        onClick={showNewReferralForm}
      >
        {t('add_referral')}
      </Button>
    </FormProvider>
  );
};

export default NewReferral;