"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import styles from "./nav.module.scss";
import { useCommonContext } from "@/context/commonContext";
import Cookies from "js-cookie";

interface NavPCProps {
  title: string;
}

const NavPC: React.FC<NavPCProps> = ({ title }) => {
  const [showDropdown, setDropdown] = useState(false);

  const toggleDropdown = () => {
    if (showDropdown) {
      setDropdown(false);
    } else {
      setDropdown(true);
    }
  };
  const handleMouseEnter = () => {
    setDropdown(true);
  };

  const handleMouseLeave = () => {
    setDropdown(false);
  };

  const [isLogin, setIsLogin] = useState(false);
  const { user, setUser } = useCommonContext();

  useEffect(() => {
    if (user) {
      setIsLogin(true);
    } else {
      setIsLogin(false);
    }
  }, [user]);

  const logout = () => {
    setUser(null);
    Cookies.remove("ut");
  };

  const isCurrent = (currentTitle: string) => {
    return currentTitle === title;
  };
  return (
    <div className={styles.nav}>
      <div className={styles["nav-bar"]}>
        <div className={styles["navbar-brand"]}>
          <a href={"/"}>
            <div className={styles.logo}>HIPO 高潜</div>
          </a>
        </div>
        <div className={styles["navbar-collapse"]}>
          <div className={styles["navbar-content"]}>
            <Link className={styles.link} href="/">
              首页
            </Link>
            <Link className={isCurrent("关于我们") ? styles.linkChecked : styles.link} href="/about">
              关于我们
            </Link>
            <Link className={styles.link} href="/#service">
              业务介绍
            </Link>
            <Link className={isCurrent("顾问介绍") ? styles.linkChecked : styles.link} href="/#consultant">
              顾问介绍
            </Link>
            <Link className={isCurrent("经典案例") ? styles.linkChecked : styles.link} href="/caseList">
              经典案例
            </Link>
            <Link className={isCurrent("行业洞察") ? styles.linkChecked : styles.link} href="/insightList">
              行业洞察
            </Link>
            <Link className={isCurrent("联系我们") ? styles.linkChecked : styles.link} href="/contactUs">
              联系我们
            </Link>
            {isLogin && (
              <>
                <div className={styles["navbar-user"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                  <Link className={styles.link} href="#" onClick={() => toggleDropdown()}>
                    {user?.phone}
                  </Link>
                  <div
                    className={showDropdown ? styles["show-drop"] : styles["hide-drop"]}
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                  >
                    <Link className={styles.link} href="#" onClick={() => logout()}>
                      退出
                    </Link>
                  </div>
                </div>
              </>
            )}
            {!isLogin && (
              <>
                <div className={styles["navbar-login"]}>
                  <Link className={styles.link} href={"/user/login"}>
                    登录
                  </Link>
                </div>
                <div className={styles["navbar-register"]}>
                  <Link className={styles.link} href={"/user/register"}>
                    注册
                  </Link>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
      <div className={styles["nav-line"]} />
    </div>
  );
};

export default NavPC;
