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

import { useModal } from '@material-hu/hooks/useModal';
import List from '@material-hu/mui/List';
import ListItem from '@material-hu/mui/ListItem';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

import { applicantsKeys, jobKeys } from '../../../queries';
import { closeJobOffer } from '../../../services';
import { type JobDetailApplicantsPaginationParams } from '../../../types';

type UseCloseJobOfferModalProps = {
  jobId?: number | null;
  onError: () => void;
  params: JobDetailApplicantsPaginationParams;
};

export const useCloseJobOfferModal = ({
  jobId,
  onError,
  params,
}: UseCloseJobOfferModalProps) => {
  const { t } = useLokaliseTranslation('ats');
  const queryClient = useQueryClient();

  const { enqueueSnackbar } = useHuSnackbar();
  const { isLoading, mutate } = useMutation({
    mutationFn: () => {
      if (!jobId) {
        throw new Error('Job ID is required');
      }
      return closeJobOffer({ jobOfferId: jobId });
    },
    onSuccess: () => {
      enqueueSnackbar({
        title: t('job_offers.alerts.job_close.success'),
        variant: 'success',
      });
      closeModal();
      queryClient.invalidateQueries(jobKeys.detail(jobId));
      queryClient.invalidateQueries([
        applicantsKeys.jobDetailAll(jobId),
        params,
      ]);
    },
    onError: () => {
      closeModal();
      // TODO: Condition to show the close job error modal from error regarding candidates in the job offer
      onError();
    },
  });

  const { closeModal, ...modalProps } = useModal(
    Dialog,
    {
      fullWidth: true,
    },
    {
      title: t('job_offers.alerts.job_close.title'),
      body: (
        <Stack>
          <Typography
            variant="globalS"
            fontWeight="fontWeightRegular"
          >
            {t('job_offers.alerts.job_close.description')}
          </Typography>
          <List
            dense
            sx={{ listStyle: 'inside', py: 0, listStyleType: 'disc' }}
          >
            <ListItem sx={{ py: 0, display: 'list-item' }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
              >
                {t('job_offers.alerts.job_close.description_bullet_1')}
              </Typography>
            </ListItem>
            <ListItem sx={{ py: 0, display: 'list-item' }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
              >
                {t('job_offers.alerts.job_close.description_bullet_2')}
              </Typography>
            </ListItem>
          </List>
        </Stack>
      ),
      primaryButtonProps: {
        children: t('job_offers.alerts.job_close.confirm'),
        loading: isLoading,
        disabled: isLoading,
        onClick: () => {
          mutate();
        },
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: () => {
          closeModal();
        },
      },
    },
  );

  return { ...modalProps, closeModal };
};