import { useModal } from '@material-hu/hooks/useModal';

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

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

type Args = {
  /** Triggered by the secondary "exit without saving" button. */
  onExitWithoutSaving: () => void;
};

const useExitOrContinueModal = ({ onExitWithoutSaving }: Args) => {
  const { t } = useLokaliseTranslation('service_management');

  const { showModal, modal, closeModal } = useModal(() => (
    <Dialog
      title={t('confirm_exit_title')}
      textBody={t('confirm_exit_or_continue_description')}
      onClose={closeModal}
      primaryButtonProps={{
        variant: 'primary',
        id: 'confirm-delete-category-button',
        children: t('continue_editing'),
        onClick: closeModal,
      }}
      secondaryButtonProps={{
        id: 'confirm-exit-without-saving-button',
        variant: 'tertiary',
        children: t('exit_without_saving'),
        onClick: onExitWithoutSaving,
      }}
    />
  ));

  return { open: showModal, close: closeModal, modal };
};

export default useExitOrContinueModal;