import { useEffect } from 'react';
import { useBlocker } from 'react-router';

import { useModal } from '@material-hu/hooks/useModal';
import { LoadingButtonProps as ButtonProps } from '@material-hu/mui/lab/LoadingButton';

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

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

import useHuGoTheme from '../useHuGoTheme';

type ModalProps = {
  title?: string;
  body?: string;
  primaryButtonProps?: ButtonProps;
  secondaryButtonProps?: ButtonProps;
};

type Props = {
  modalProps?: ModalProps;
  shouldBlock?: boolean;
};

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

const useHugoUnsavedWarning = (props: Props) => {
  const { modalProps, shouldBlock = false } = props;
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('backoffice_only');

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

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

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

  const onPrimaryClick = modalProps?.primaryButtonProps?.onClick
    ? modalProps?.primaryButtonProps.onClick
    : () => {
        blocker?.proceed?.();
      };

  const onModalClose = () => {
    blocker?.reset?.();
    unsavedChangesModal.closeModal();
  };

  const onSecondaryClick = modalProps?.secondaryButtonProps?.onClick
    ? modalProps?.secondaryButtonProps.onClick
    : onModalClose;

  const unsavedChangesModal = useModal(
    () => (
      <HuGoThemeProvider>
        <HuDialog
          title={
            modalProps?.title || t('backoffice_only:unsaved_warning.title')
          }
          textBody={
            modalProps?.body || t('backoffice_only:unsaved_warning.description')
          }
          onClose={onModalClose}
          secondaryButtonProps={{
            variant: 'tertiary',
            children:
              modalProps?.secondaryButtonProps.children || t('general:cancel'),
            onClick: onSecondaryClick,
            ...modalProps?.secondaryButtonProps,
          }}
          primaryButtonProps={{
            variant: 'primary',
            children:
              modalProps?.primaryButtonProps.children || t('general:confirm'),
            onClick: onPrimaryClick,
            ...modalProps?.primaryButtonProps,
          }}
        />
      </HuGoThemeProvider>
    ),
    {
      maxWidth: 'sm',
      onClose: onModalClose,
    },
  );

  useEffect(() => {
    blocker.state === 'blocked' && unsavedChangesModal.showModal();
  }, [blocker.state]);

  return {
    modal: unsavedChangesModal,
    blocker,
  };
};

export default useHugoUnsavedWarning;