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

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

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

type Args = {
  /** Called after the modal closes when the user confirms exit. */
  onExit: () => void;
};

const useActiveServiceItemHasChangesModal = ({ onExit }: Args) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);

  const { showModal, modal, closeModal } = useModal(() => (
    <Dialog
      onClose={closeModal}
      title={t('active_service_item_has_changes_title')}
      textBody={t('active_service_item_has_changes_description')}
      primaryButtonProps={{
        id: 'active-si-exit-button',
        variant: 'primary',
        children: t('general:exit'),
        onClick: () => {
          closeModal();
          onExit();
        },
      }}
      secondaryButtonProps={{
        id: 'active-si-continue-editing-button',
        variant: 'tertiary',
        children: t('continue_editing'),
        onClick: closeModal,
      }}
    />
  ));

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

export default useActiveServiceItemHasChangesModal;