import { useEffect } from 'react';
import { useQueryClient, useMutation } from 'react-query';

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

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

import { employeeLifecycleKeys } from 'src/pages/dashboard/EmployeeLifecycle/queries';
import { assignManagerToProcess } from 'src/pages/dashboard/EmployeeLifecycle/services';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AssignManagerForm from '../forms/AssignManagerForm';

export type AssignManagerDrawerProps = {
  open: boolean;
  processId: string;
  onActionStart?: () => void;
  onActionEnd?: () => void;
  onClose: () => void;
};

const AssignManagerDrawer = ({
  open,
  processId,
  onActionStart,
  onActionEnd,
  onClose,
}: AssignManagerDrawerProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { enqueueSnackbar } = useSnackbar();
  const queryClient = useQueryClient();

  const assignManagerToProcessMutation = useMutation({
    mutationFn: (managerIds: number[]) =>
      assignManagerToProcess(processId, { managerIds }),
    onMutate: () => {
      onActionStart?.();
    },
    onError: () => {
      enqueueSnackbar({
        title: t('assign_responsibles_form.form_error'),
        variant: 'error',
      });
    },
    onSuccess: () => {
      enqueueSnackbar({
        title: t('assign_responsibles_form.form_success'),
        variant: 'success',
      });
      queryClient.resetQueries(
        employeeLifecycleKeys.processManagers(processId),
      );
      assignManagerDrawer.closeDrawer();
      onClose?.();
    },
    onSettled: () => {
      onActionEnd?.();
    },
  });

  const assignManagerDrawer = useDrawerV2(() => ({
    title: t('employee_lifecycle:assign_responsibles'),
    onClose: () => {
      if (assignManagerToProcessMutation.isLoading) {
        return;
      }
      assignManagerDrawer.closeDrawer();
      onClose?.();
    },
    disableEscapeKeyDown: true,
    primaryButtonProps: {
      children: t('general:select'),
      fullWidth: true,
      form: 'assign-manager-form',
      type: 'submit',
      loading: assignManagerToProcessMutation.isLoading,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      type: 'reset',
      fullWidth: true,
      disabled: assignManagerToProcessMutation.isLoading,
      onClick: () => {
        assignManagerDrawer.closeDrawer();
        onClose?.();
      },
    },
    children: processId ? (
      <AssignManagerForm
        processId={processId}
        onConfirm={(userIds: number[]) => {
          assignManagerToProcessMutation.mutate(userIds);
        }}
      />
    ) : null,
  }));

  useEffect(() => {
    if (open) {
      assignManagerDrawer.showDrawer({});
    } else {
      assignManagerDrawer.closeDrawer();
      onClose?.();
    }
  }, [open]);

  return <>{assignManagerDrawer.drawer}</>;
};

export default AssignManagerDrawer;