// next 15 app router menu.tsx
"use client";

export const dynamic = "force-cache";

import parse from "html-react-parser";
import { useCookies } from "next-client-cookies";
import { useEffect, useState } from "react";
import { init_sidebar } from "./utils/init-sidebar";

export default function Menu() {
  const [menu, setMenu] = useState("");

  const cookies = useCookies();
  const sessionId = cookies.get("__sessid__") as string;

  useEffect(() => {
    // menu fetch
    async function generateMenuRedis() {
      try {
        if (!sessionId) {
          console.error("There is no active session !");
        }
        // menu comes from this api as html like {content: "<ul><li><a>..."}
        const response = await fetch(`${process.env.NEXT_PUBLIC_WEB_API_URL as string}Menu/GenerateMenuHtmlRedis`, {
          headers: {
            Authorization: `Bearer ${sessionId}`,
          },
          cache: "force-cache",
        });
        const result = (await response.json()) as { content: string };
        // html cleanup and link replace
        setMenu(result.content.replace(/`/g, "").replace(/Default.aspx/g, ""));
      } catch (error) {
        console.error(error);
      }
    }

    // client side and jQuery validation
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    if (window && jQuery && $) {
    // here is a file includes jquery and window stuff
      init_sidebar();
    } else {
      console.error("Window or JQuery is not defined !");
    }
    generateMenuRedis();
  }, [menu, sessionId]);

  if (!menu && menu === "") return <div>Loading menu...</div>;
  // to parse html to react like <li class -> <li className
  const reactMenu = parse(menu);

  return <>{reactMenu}</>;
}