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

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

import NewModal from '@material-hu/components/deprecated/NewModal';

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

export type DeleteQuestionModalProps = {
  onClose: (event?: React.MouseEvent<HTMLButtonElement>) => void;
  onConfirm: (event?: React.MouseEvent<HTMLButtonElement>) => void;
  questionName: string;
};

export const DeleteQuestionModal = ({
  onClose,
  onConfirm,
  questionName,
}: DeleteQuestionModalProps) => {
  const { t } = useLokaliseTranslation('learning');

  const handleConfirm = (event: React.MouseEvent<HTMLButtonElement>) => {
    onConfirm(event);
    onClose(event);
  };

  return (
    <NewModal
      onClose={onClose}
      title={t('common.delete_question_alert')}
      body={
        <Typography variant="body1">
          <Trans
            i18nKey={t('common.delete_question_alert_description', {
              questionName,
            })}
            t={t as TFunction}
            components={{
              strong: (
                <Typography
                  variant="subtitle1"
                  component="span"
                  sx={{ ml: 0.5 }}
                />
              ),
              br: <br />,
            }}
          />
        </Typography>
      }
      primaryButtonProps={{
        id: 'confirm-delete-question-button',
        children: t('general:delete_question'),
        onClick: handleConfirm,
      }}
      secondaryButtonProps={{
        id: 'cancel-delete-question-button',
        variant: 'text',
        children: t('general:cancel'),
        onClick: onClose,
      }}
    />
  );
};

export default DeleteQuestionModal;