import { IProps } from "@/common/Iprops.interface";
import * as React from "react";
import { useCallback, useState } from "react";
import Logo from "@/assets/img/logo.png";
import LogoWhite from "@/assets/img/logo_white.png";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { AppContext } from "@/store/AppProvider";
export interface IAppProps extends IProps {}

interface HoverLinkType extends IProps {
  theme: string;
}
const HoverLink = (props: HoverLinkType) => {
  const [onHover, setOnHover] = useState(false);
  const slgurl = import.meta.env.VITE_SLG;
  const slcurl = import.meta.env.VITE_SLC;
  const lzburl = import.meta.env.VITE_LZB;
  const goLink = (name: string) => {
    switch (name) {
      case "slc":
        window.open(slcurl, "_blank");
        break;
      case "slg":
        window.open(slgurl, "_blank");
        break;
      case "lzb":
        window.open(lzburl, "_blank");
        break;
    }
  };

  return (
    <div
      className={`relative content-1-cn  font-normal ${
        props.theme === "light" ? "text-[#061E3B]" : "text-white opacity-70"
      }`}
      onPointerEnter={() => setOnHover(true)}
      onPointerLeave={() => setOnHover(false)}
    >
      <div className="cursor-pointer">合作生态</div>
      {onHover ? (
        <div className="py-3">
          <div
            className={`hover-toggle-box w-[180%]
              flex-cols
              absolute
              animate-fadeIn
              animate-alternate
              animate-fill-both
              bg-opacity-30
               duration-75
              -translate-x-[18%]  rounded-lg flex-col
              text-[#061E3B]
              items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]
            
                
                `}
          >
            <div
              className={`my-[8px] cursor-pointer ${
                props.theme === "light"
                  ? "hover:text-theme-blue"
                  : "hover:text-white"
              } `}
              onClick={() => goLink("slc")}
            >
              上链查
            </div>
            <div
              className={`my-[8px] cursor-pointer ${
                props.theme === "light"
                  ? "hover:text-theme-blue"
                  : "hover:text-white"
              } `}
              onClick={() => goLink("slg")}
            >
              上链购
            </div>
            <div
              className={`my-[8px] cursor-pointer ${
                props.theme === "light"
                  ? "hover:text-theme-blue"
                  : "hover:text-white"
              }`}
              onClick={() => goLink("lzb")}
            >
              链证宝
            </div>
          </div>
        </div>
      ) : (
        ""
      )}
    </div>
  );
};

export default function Navbar(props: IAppProps) {
  const { pathname } = useLocation();
  const { data } = React.useContext(AppContext);
  const navigate = useNavigate();
  const navbarWithBg = useCallback(()=>{
    if(pathname.includes('/news/')){
      return true
    } 
    return false;

  },[pathname])
  
  const themeStyle = useCallback(
    (theme: string, active: boolean) => {
      if (theme === "light") {
        if (active) {
          return "text-theme-dark content-sub2-title-cn py-0 hover:text-theme-blue";
        }
        return "text-[#061E3B] font-normal hover:text-theme-blue";
      } else {
        if (active) {
          return "content-sub2-title-cn py-0 text-white hover:opacity-100";
        }
        return "font-normal py-0  text-white opacity-70 hover:opacity-100";
      }
    },
    [data]
  );
  return (
    <>
      <nav
        className={`invisible moblie:visible flex min-w-[1440px]
         justify-between absolute px-[120px] w-full items-center
         top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal
        ${navbarWithBg()?' bg-white':' bg-none'}
        `}
      >
        <div className="left ">
          <img
            src={
              data.theme === "dark" || pathname === "/news" ? LogoWhite : Logo
            }
            onClick={() => navigate("/")}
            className=" cursor-pointer"
          />
        </div>
        <div className="right content-1-cn items-start flex gap-x-12">
          <Link
            to="/"
            className={`${
              pathname === "/"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            Baas33
          </Link>
          <Link
            to="chain33"
            className={`${
              pathname === "/chain33"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            Chain33
          </Link>
          <HoverLink theme={data.theme} />
          <Link
            to="news"
            className={`${
              pathname === "/news"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            新闻动态
          </Link>
          {/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
          <Link
            to="about"
            className={`${
              pathname === "/about"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            关于我们
          </Link>
        </div>
      </nav>
    </>
  );
}
