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

import { GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import { invalidateApprovalSteps } from 'src/services/vacationsService';
import { ApprovalStep } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateMinRule, validateRequired } from 'src/utils/validation';

import { approversFormFields } from '../../constant';

import { useApprovalUsersMutation } from './useApprovalUsersMutation';

type ReminderDaysIntervalForm = {
  reminderDaysInterval: number;
  approvalUsers: ApprovalStep[];
};

const useReminderDaysInterval: GetDrawerConfiguration<
  ReminderDaysIntervalForm
> = args => {
  const { t } = useLokaliseTranslation('time_off');
  const { enqueueSnackbar } = useHuSnackbar();
  const { closeDrawer, reminderDaysInterval, approvalUsers } = args;

  const form = useForm<ReminderDaysIntervalForm>({
    defaultValues: {
      reminderDaysInterval,
      approvalUsers,
    },
    mode: 'onChange',
  });

  useEffect(() => {
    form.reset({
      reminderDaysInterval,
      approvalUsers,
    });
  }, [reminderDaysInterval, approvalUsers]);

  const mutation = useApprovalUsersMutation({
    onSuccess: () => {
      closeDrawer();
      enqueueSnackbar({
        title: t('reminder.saved_successfully'),
        variant: 'success',
      });
      invalidateApprovalSteps();
    },
  });

  const handleSave = async () => {
    const isValid = await form.trigger();
    if (!isValid) return;

    mutation.mutate(form.getValues());
  };

  return {
    title: t('reminder.add'),
    children: (
      <FormProvider {...form}>
        <Stack>
          <HuFormInputClassic
            name={approversFormFields.reminderDaysInterval}
            inputProps={{
              label: t('reminder.send_after'),
              placeholder: t('reminder.placeholder'),
              hasCounter: false,
              type: 'number',
              maxLength: 3,
            }}
            rules={{
              validate: {
                min: validateMinRule(1),
              },
              ...validateRequired(),
            }}
          />
        </Stack>
      </FormProvider>
    ),
    primaryButtonProps: {
      children: t('general:save'),
      onClick: handleSave,
      loading: mutation.isLoading,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
    },
  };
};

export default useReminderDaysInterval;