import { type FC, useEffect } from 'react';
import { useBlocker } from 'react-router';

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

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

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

const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
  event.preventDefault();
  event.returnValue = true;
};

export type WarningModalProps = {
  onClose: () => void;
  onConfirm: () => void;
};

export type WarningModalType = FC<WarningModalProps>;

export const useUnsavedWarning = (
  WarningModal?: WarningModalType,
  disabled = false,
) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      !disabled && currentLocation.pathname !== nextLocation.pathname,
  );

  useEffect(() => {
    if (!disabled) {
      window.addEventListener('beforeunload', beforeUnloadHandler);
    }

    return () => {
      window.removeEventListener('beforeunload', beforeUnloadHandler);
    };
  }, [disabled]);

  const DefaultModal = ({ onClose, onConfirm }: WarningModalProps) => (
    <Dialog
      onClose={onClose}
      title={t('backoffice_only:unsaved_warning.title')}
      textBody={t('backoffice_only:unsaved_warning.description')}
      primaryButtonProps={{
        id: 'cancel-unsaved-warning-button',
        children: t('backoffice_only:unsaved_warning.cancel'),
        variant: 'contained',
        color: 'primary',
        onClick: onClose,
      }}
      secondaryButtonProps={{
        id: 'confirm-unsaved-warning-button',
        children: t('backoffice_only:unsaved_warning.confirm'),
        color: 'primary',
        variant: 'text',
        onClick: onConfirm,
      }}
    />
  );

  const { modal, showModal, closeModal } = useModal(
    WarningModal || DefaultModal,
    {
      fullWidth: true,
      maxWidth: 'sm',
      onClose: () => {
        closeModal();
        blocker?.reset?.();
      },
    },
    {
      onClose: () => {
        closeModal();
        blocker?.reset?.();
      },
      onConfirm: () => {
        blocker?.proceed?.();
      },
    },
  );

  // biome-ignore lint/correctness/useExhaustiveDependencies: blocker.state is a dependency of the effect
  useEffect(() => {
    blocker.state === 'blocked' && showModal();
  }, [blocker.state]);

  return {
    modal,
    blocker,
    showModal,
    closeModal,
  };
};

export default useUnsavedWarning;