import { useMutation } 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 useSnackbar from '@material-hu/components/design-system/Snackbar';

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

import { openJobOffer } from '../../../services';
import { type JobOfferPublishForm } from '../../../types';

type UseJobOpenFromPublishModalProps = {
  jobOfferId: number;
  onPublish: ({
    values,
    shouldPublish,
  }: {
    values: JobOfferPublishForm;
    shouldPublish: boolean;
  }) => void;
  values: JobOfferPublishForm;
  isLoadingPublish: boolean;
  jobOfferIsDraft: boolean;
};

export const useJobOpenFromPublishModal = ({
  jobOfferId,
  onPublish,
  values,
  isLoadingPublish,
  jobOfferIsDraft,
}: UseJobOpenFromPublishModalProps) => {
  const { t } = useLokaliseTranslation(['ats']);
  const { enqueueSnackbar } = useSnackbar();

  const { mutate: openJobMutate, isLoading: isLoadingJobStatus } = useMutation(
    () => {
      if (!jobOfferId) {
        throw new Error('Job ID is required');
      }
      return openJobOffer({ jobOfferId });
    },
    {
      onSuccess: () => {
        onPublish({ values, shouldPublish: true });
        enqueueSnackbar({
          title: t('job_offers.alerts.job_open.success'),
          variant: 'success',
        });
        // Invalidation happens in createJobPostingMutation.onSuccess; doing it here unmounts JobOfferPublish mid-chain (useJob treats isFetching as isLoading).
      },
    },
  );

  const isLoading = isLoadingJobStatus || isLoadingPublish;

  const { closeModal, ...modalProps } = useModal(
    Dialog,
    {
      fullWidth: true,
    },
    {
      title: t('job_offers.alerts.job_open.title_from_publish'),
      body: (
        <Stack>
          <Typography
            variant="globalS"
            fontWeight="fontWeightRegular"
          >
            {t('job_offers.alerts.job_open.description_from_publish')}
          </Typography>
          <List
            dense
            sx={{ listStyle: 'inside', py: 0, listStyleType: 'disc' }}
          >
            <ListItem sx={{ display: 'list-item', py: 0 }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
              >
                {t('job_offers.alerts.job_open.description_bullet_1')}
              </Typography>
            </ListItem>
            <ListItem sx={{ display: 'list-item', py: 0 }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
              >
                {t('job_offers.alerts.job_open.description_bullet_2')}
              </Typography>
            </ListItem>
            <ListItem sx={{ display: 'list-item', py: 0 }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
              >
                {t('job_offers.alerts.job_open.description_bullet_3')}
              </Typography>
            </ListItem>
          </List>
        </Stack>
      ),
      primaryButtonProps: {
        children: t('common.publish_job'),
        loading: isLoading,
        disabled: isLoading,
        onClick: () => {
          if (jobOfferIsDraft) {
            openJobMutate();
          } else {
            onPublish({ values, shouldPublish: true });
          }
        },
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: () => {
          closeModal();
        },
      },
    },
  );

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