import { FormProvider, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { useMutation } from 'react-query';

import { Stack, Typography } from '@material-hu/mui/index';

import Drawer from '@material-hu/components/design-system/Drawer';

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import useSnackbar from '@material-hu/components/design-system/Snackbar';
import useGeneralError from 'src/hooks/useGeneralError';
import { sendMulticompanyGroupInvite } from 'src/services/groupsService';
import { validateEmailRule } from 'src/utils/validation';

type InviteExternalMembersDrawerProps = {
  isOpen: boolean;
  onClose: () => void;
  groupId: string;
};

export const InviteExternalMembersDrawer = ({
  isOpen,
  onClose,
  groupId,
}: InviteExternalMembersDrawerProps) => {
  const { t } = useTranslation(['group', 'general', 'validations']);
  const { enqueueSnackbar } = useSnackbar();
  const showGeneralError = useGeneralError();
  const form = useForm({
    defaultValues: {
      externalUserEmail: '',
    },
  });

  const { handleSubmit, reset } = form;

  const { mutate: sendInvite, isLoading } = useMutation(
    (externalUserEmail: string) =>
      sendMulticompanyGroupInvite(groupId, externalUserEmail),
    {
      onSuccess: () => {
        enqueueSnackbar({
          title: t('group:invite_sent'),
          variant: 'success',
        });
        reset();
        onClose();
      },
      onError: err => {
        showGeneralError(err);
      },
    },
  );

  const onSubmit = async ({
    externalUserEmail,
  }: {
    externalUserEmail: string;
  }) => {
    const isValid = await form.trigger();
    if (!isValid) return;
    sendInvite(externalUserEmail);
  };

  return (
    <Drawer
      title={t('group:invite_external_to_group')}
      open={isOpen}
      onClose={onClose}
      primaryButtonProps={{
        children: t('group:send_invite'),
        type: 'submit',
        onClick: handleSubmit(onSubmit),
        loading: isLoading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: () => {
          onClose();
        },
      }}
    >
      <FormProvider {...form}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Typography variant="globalS">
            {t('group:invite_external_to_group_description')}
          </Typography>
          <Stack
            sx={theme => ({
              backgroundColor: theme.palette.hugoBackground?.neutralBg,
              p: 2,
              borderRadius: 2,
              mt: 2,
            })}
          >
            <FormInputClassic
              name="externalUserEmail"
              inputProps={{
                placeholder: t(
                  'group:invite_external_to_group_email_placeholder',
                ),
                helperText: t(
                  'group:invite_external_to_group_email_helper_text',
                ),
                hasCounter: false,
              }}
              rules={{
                required: {
                  value: true,
                  message: t('validations:required_field'),
                },
                validate: validateEmailRule,
              }}
            />
          </Stack>
        </form>
      </FormProvider>
    </Drawer>
  );
};