import { type TFunction, Trans } from 'react-i18next';

import Typography from '@material-hu/mui/Typography';

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

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

import { useDeleteLearningCertificate } from '../useDeleteLearningCertificate';

type DeleteCertificateDialogProps = {
  certificateId: number;
  certificateName: string;
  onClose: () => void;
};

const DeleteCertificateDialog = ({
  certificateId,
  certificateName,
  onClose,
}: DeleteCertificateDialogProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { mutate, isLoading } = useDeleteLearningCertificate();

  const handleConfirm = () => {
    mutate({ certificateId, certificateName }, { onSettled: onClose });
  };

  return (
    <Dialog
      onClose={onClose}
      title={t('settings.certificates.actions.delete.confirm_title', {
        certificateName,
      })}
      body={
        <Typography
          variant="globalS"
          sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
        >
          <Trans
            i18nKey="learning:settings.certificates.actions.delete.confirm_body"
            values={{ certificateName }}
            t={t as TFunction}
            components={{ strong: <strong /> }}
          />
        </Typography>
      }
      primaryButtonProps={{
        color: 'error',
        children: t('settings.certificates.actions.delete.confirm_primary'),
        onClick: handleConfirm,
        loading: isLoading,
        disabled: isLoading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
        disabled: isLoading,
      }}
    />
  );
};

export default DeleteCertificateDialog;