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

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

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

type Args = {
  isLoading: boolean;
  /**
   * Called by the primary "save" button. Receives a callback to run on success
   * (used to close this modal and exit form creation mode).
   */
  onSave: (onSuccess: () => void) => void;
  /** Called by the secondary "exit without saving" button. */
  onExitWithoutSaving: () => void;
};

const useExitFormCreationModal = ({
  isLoading,
  onSave,
  onExitWithoutSaving,
}: Args) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);

  const { showModal, modal, closeModal } = useModal(() => (
    <Dialog
      onClose={closeModal}
      title={t('confirm_exit_form_title')}
      textBody={t('confirm_exit_form_description')}
      primaryButtonProps={{
        variant: 'primary',
        children: t('general:save'),
        loading: isLoading,
        onClick: () => onSave(closeModal),
      }}
      secondaryButtonProps={{
        variant: 'tertiary',
        children: t('exit_without_saving'),
        onClick: () => {
          onExitWithoutSaving();
          closeModal();
        },
        disabled: isLoading,
      }}
    />
  ));

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

export default useExitFormCreationModal;