movie-web/src/hooks/useOverlayRouter.ts

import { useQueryParam } from "@/hooks/useQueryParams";

export function useOverlayRouter(id: string) {
  const [route, setRoute] = useQueryParam("r");
  const routeParts = (route ?? "").split("/").filter((v) => v.length > 0);
  const routerActive = routeParts.length > 0 && routeParts[0] === id;

  function navigate(path: string) {
    const newRoute = [id, ...path.split("/").filter((v) => v.length > 0)];
    setRoute(newRoute.join("/"));
  }

  function isActive(page: string) {
    if (page === "/") return true;
    const index = routeParts.indexOf(page);
    if (index === -1) return false; // not active
    if (index === routeParts.length - 1) return false; // active but latest route so shouldnt be counted as active
    return true;
  }

  function isCurrentPage(page: string) {
    return routerActive && route === `/${id}${page}`;
  }

  function isLoaded(page: string) {
    if (page === "/") return true;
    return route.includes(page);
  }

  function isOverlayActive() {
    return routerActive;
  }

  function pageProps(page: string) {
    return {
      show: isCurrentPage(page),
      active: isActive(page),
    };
  }

  function close() {
    setRoute(null);
  }

  function open() {
    setRoute(`/${id}`);
  }

  return {
    isOverlayActive,
    navigate,
    close,
    isLoaded,
    isCurrentPage,
    pageProps,
    isActive,
    open,
  };
}