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 when the user confirms the change. The hook auto-closes the modal afterwards. */
  onConfirm: () => Promise<unknown>;
};

const useConfirmActiveServiceItemChangesModal = ({
  isLoading,
  onConfirm,
}: Args) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);

  const { showModal, modal, closeModal } = useModal(() => (
    <Dialog
      onClose={closeModal}
      title={t('active_service_item_confirm_changes_title')}
      textBody={t('active_service_item_confirm_changes_description')}
      primaryButtonProps={{
        id: 'active-si-exit-button',
        variant: 'primary',
        children: t('general:update'),
        loading: isLoading,
        onClick: async () => {
          try {
            await onConfirm();
          } catch {
            // Mutation surfaces its own error snackbar via `onError`; swallow
            // here so the rejection does not become an unhandled promise.
          } finally {
            closeModal();
          }
        },
      }}
      secondaryButtonProps={{
        id: 'active-si-continue-editing-button',
        variant: 'tertiary',
        children: t('continue_editing'),
        onClick: closeModal,
        disabled: isLoading,
      }}
    />
  ));

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

export default useConfirmActiveServiceItemChangesModal;