"use client";
import { navigations as orgNavigations } from "@/app/(introduce)/organization/(generally)/config";
import { navigations as achieveNavigations } from "@/app/(introduce)/achievements-transformation/config";
import { navigations as talentsNavigations } from "@/app/(introduce)/talents/config";
import { navigations as academyNavigations } from "@/app/(articles)/academic-exchange/academic-events/pages/[pageIndex]/config";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

const navigations = [
  { title: "首页", href: "/" },
  {
    title: "机构设置",
    href: "/organization/overview",
    children: orgNavigations,
  },
  {
    title: "人才队伍",
    href: "/talents/overview",
    children: talentsNavigations,
  },
  { title: "科研进展", href: "/research-progress/pages/1" },
  { title: "科技成果", href: "/technological-achievements/pages/1" },
  {
    title: "学术交流",
    href: "/academic-exchange/academic-events/pages/1",
    children: academyNavigations,
  },
  {
    title: "成果转化服务",
    href: "/achievements-transformation/government-policy",
    children: achieveNavigations,
  },
  {
    title: "中科院科技资源共享平台",
    href: "https://casshare.com/experts/index.jsp",
    target: "_blank",
  },
  { title: "联系我们", href: "/contact-us" },
];

const isActive = (link: string, current: string): boolean => {
  if (link === current) return true;
  if (link === "/") return false;
  const link_0 = link.split(/\/+/).filter(Boolean)[0];
  const current_0 = current.split(/\/+/).filter(Boolean)[0];
  return link_0 === current_0;
};

const MainNav = () => {
  const pathname = usePathname();
  const [activePopup, setActivePopup] = useState(-1);
  return (
    <nav className={"main-nav h-[38px] bg-[#1958a7]"}>
      <ul className={"flex h-full w-full"}>
        {navigations.map((navigation, index) => (
          <li
            className={"relative"}
            onMouseOver={() => {
              setActivePopup(() => index);
            }}
            onMouseLeave={() => {
              setActivePopup(() => -1);
            }}
            key={navigation.title + index}
          >
            <Link
              onClick={() => {
                setActivePopup(() => -1);
              }}
              href={navigation.href}
              target={navigation.target}
              className={`${
                isActive(navigation.href, pathname)
                  ? "text-[#dedede]"
                  : "text-white"
              } mx-2.5 flex h-[38px] min-w-[60px] items-center justify-center text-sm hover:text-[#dedede]`}
            >
              {navigation.title}
            </Link>
            {index === activePopup && navigation.children?.length && (
              <div
                className={`popup-menu absolute left-1/2 top-full z-40 min-w-[120px] -translate-x-1/2`}
              >
                <div
                  className={
                    "mx-auto h-0 w-0 border-b-[12px] border-l-[12px] border-r-[12px] border-b-[#b0d3eb] border-l-transparent border-r-transparent"
                  }
                ></div>
                <ul className={"whitespace-nowrap bg-[#b0d3eb]"}>
                  {navigation.children.map((child) => (
                    <li key={child.href}>
                      <Link
                        onClick={() => {
                          setActivePopup(() => -1);
                        }}
                        className={
                          "flex h-10 items-center justify-center px-2 text-[13px] hover:text-[#fe5722]"
                        }
                        href={child.href}
                      >
                        {child.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default MainNav;