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";
import { debounce as _debounce, throttle as _throttle } from "lodash";
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 normal-content  font-normal ${
        props.theme === "light" ? "text-[#061E3B]" : "text-white "
      }`}
      onPointerEnter={() => setOnHover(true)}
      onPointerLeave={() => setOnHover(false)}
    >
      <div className="cursor-pointer opacity-70">合作生态</div>
      {onHover ? (
        <div
          className={`w-[185%]
              flex-cols
              absolute
              animate-fadeIn
              -translate-x-[20%]  rounded-lg flex-col
              items-center justify-center text-center 
              `}
        >
          <div
            className={` mt-[15px] cursor-pointer ${
              props.theme === "light"
                ? " text-theme-dark bg-[#EAF0F4]/50 hover:bg-[#EAF0F4]   hover:text-theme-blue hover:bg-text-theme-blue"
                : " text-white/70 hover:text-white  bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60 "
            }  rounded-t-lg  py-3 px-2 `}
            onClick={() => goLink("slc")}
          >
            上链查
          </div>
          <div
            className={` cursor-pointer ${
              props.theme === "light"
                ? " text-theme-dark   bg-[#EAF0F4]/50 hover:bg-[#EAF0F4] hover:text-theme-blue "
                : "text-white/70 hover:text-white  bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60  "
            }   py-3 px-2 `}
            onClick={() => goLink("slg")}
          >
            上链购
          </div>
          <div
            className={` cursor-pointer ${
              props.theme === "light"
                ? " text-theme-dark  bg-[#EAF0F4]/50 hover:bg-[#EAF0F4]  hover:text-theme-blue "
                : "text-white/70 hover:text-white  bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60  "
            }   rounded-b-lg   py-3 px-2  `}
            onClick={() => goLink("lzb")}
          >
            链证宝
          </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;
    }
    // else if(pathname.includes("/details/")){
    //   return true;
    // }
    return false;
  }, [pathname]);


  const myNavigate = (path: string)=>{
      if(pathname === path){
        return
      }
      navigate(path)
  }
  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  cursor-pointer";
        }
        return "text-[#061E3B] font-normal hover:text-theme-blue  cursor-pointer";
      } else {
        if (active) {
          return "content-sub2-title-cn py-0 text-[#EAF0F4] hover:text-white  cursor-pointer";
        }
        return "font-normal py-0  text-white opacity-70 hover:opacity-100  cursor-pointer";
      }
    },
    [data]
  );
  return (
    <>
      <nav
        className={`visible h-[92px]  flex min-w-[1440px]
         justify-between fixed px-[120px] w-full items-center
         top-0 z-[99999]  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 normal-content items-start flex gap-x-12">
          <div
            onClick={() => myNavigate("/")}
            className={`${
              pathname === "/"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            Baas33
          </div>
          <div
            onClick={() => myNavigate("/chain33")}
            className={`${
              pathname === "/chain33"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            Chain33
          </div>
          <HoverLink theme={data.theme} />
          <div
             onClick={() => myNavigate("/news")}
            className={`${
              pathname === "/news"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            新闻动态
          </div>
          {/* <div to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
          <div
             onClick={() => myNavigate("/about")}
            className={`${
              pathname === "/about"
                ? themeStyle(data.theme, true)
                : themeStyle(data.theme, false)
            }`}
          >
            关于我们
          </div>
        </div>
      </nav>
    </>
  );
}
