import { useState } from 'react';

import useHugoUnsavedWarning from 'src/hooks/useUnsavedWarning/altHugo';
import { useLokaliseTranslation } from 'src/utils/i18n';
import wait from 'src/utils/wait';

export const useUnsavedModal = (shouldBlock: boolean) => {
  const { t } = useLokaliseTranslation('rolesAndPermissions');
  const [allowExit, setAllowExit] = useState(false);
  const { modal, blocker } = useHugoUnsavedWarning({
    modalProps: {
      title: t('wish_to_exit'),
      body: t('wish_to_exit_description'),
      primaryButtonProps: {
        children: t('general:cancel'),
        onClick: () => {
          blocker.reset!();
          modal.closeModal();
        },
      },
      secondaryButtonProps: {
        children: t('general:unsaved_changes.confirm'),
        onClick: () => {
          modal.closeModal();
          blocker.proceed!();
        },
      },
    },
    shouldBlock: shouldBlock && !allowExit,
  });

  const cancelUnsavedModal = async () => {
    setAllowExit(true);
    await wait(50);
  };

  return { unsavedModal: modal, cancelUnsavedModal };
};