"use client";

import { useCallback, useEffect } from "react";

import { useModalStore } from "@/store/modal-store/use-modal-store";

const useEventHandlers = (): void => {
  const modalStore = useModalStore();
  const hasModalHashInUrl = window.location.hash.includes("-modal");

  const handlePopStateCloseModal = useCallback(
    (e: PopStateEvent) => {
      if (hasModalHashInUrl) {
        // #IMPORTANT This is a hack to prevent the browser from going back when the modal is open
        e.preventDefault();
        modalStore.closeLastModal();
      }
    },
    [hasModalHashInUrl, modalStore],
  );

  useEffect(() => {
    window.addEventListener("popstate", handlePopStateCloseModal);

    return () => {
      window.removeEventListener("popstate", handlePopStateCloseModal);
    };
  }, [handlePopStateCloseModal, hasModalHashInUrl]);
};

export default useEventHandlers;