import { IconX } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { type WarningModalProps } from 'src/hooks/useUnsavedWarning';
import { useLokaliseTranslation } from 'src/utils/i18n';

type ModalUnsavedChangesProps = WarningModalProps & {
  isLoading: boolean;
  onCloseWithoutSaving: () => void;
};

export const ModalUnsavedChanges = ({
  onClose,
  onConfirm,
  isLoading,
  onCloseWithoutSaving,
}: ModalUnsavedChangesProps) => {
  const { t } = useLokaliseTranslation('ats');

  return (
    <Stack sx={{ flexDirection: 'column' }}>
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          px: 3,
          py: 2,
        }}
      >
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {t('job_offers.alerts.exit_modal.title')}
        </Typography>
        <IconButton
          onClick={onClose}
          disabled={isLoading}
        >
          <IconX />
        </IconButton>
      </Stack>
      <Typography
        variant="globalS"
        sx={{
          px: 3,
          py: 2,
        }}
      >
        {t('job_offers.alerts.exit_modal.description')}
      </Typography>
      <Divider sx={{ my: 2 }} />
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          gap: 2,
          justifyContent: 'end',
          px: 3,
          py: 2,
        }}
      >
        <Button
          variant="tertiary"
          onClick={onCloseWithoutSaving}
          disabled={isLoading}
        >
          {t('job_offers.alerts.exit_modal.cancel')}
        </Button>
        <Button
          variant="primary"
          onClick={onConfirm}
          disabled={isLoading}
          sx={{
            minWidth: 133,
          }}
          endIcon={isLoading && <Spinner size={16} />}
        >
          {!isLoading && t('job_offers.alerts.exit_modal.confirm')}
        </Button>
      </Stack>
    </Stack>
  );
};