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

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

type LearningUnsavedDialogProps = WarningModalProps & {
  onExit: () => void;
  onSave: () => Promise<boolean>;
  loading: boolean;
};

export const LearningUnsavedDialog = ({
  onClose,
  onConfirm,
  onExit,
  onSave,
  loading = false,
}: LearningUnsavedDialogProps) => {
  const { t } = useLokaliseTranslation('general');

  const handleSave = async () => {
    const success = await onSave();
    if (success) onConfirm();
    onClose();
  };

  const handleExit = () => {
    onExit();
    onConfirm();
    onClose();
  };

  return (
    <Dialog
      onClose={onClose}
      title={t('unsaved_changes_title')}
      textBody={t('unsaved_changes_description')}
      primaryButtonProps={{
        children: t('save_changes'),
        loading,
        onClick: handleSave,
      }}
      secondaryButtonProps={{
        children: t('exit_without_saving'),
        onClick: handleExit,
      }}
    />
  );
};