"use client";

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

const HeaderPC: React.FC = () => {
  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");
  };

  return (
    <div className={styles.nav}>
      <div className={styles["nav-bar"]}>
        <div className={styles["navbar-brand"]}>
          {/* <div className={styles.logo}>HIPO 高潜</div> */}
          <div className={styles.logo2}>高潜（北京）咨询有限公司官网</div>
        </div>
        <div className={styles["navbar-collapse"]}>
          <div className={styles["navbar-content"]}>
            <Link className={styles.link} href="#" scroll={true}>
              首页
            </Link>
            <Link className={styles.link} href="/about">
              关于我们
            </Link>
            <Link className={styles.link} href="#service" scroll={true}>
              业务介绍
            </Link>
            <Link className={styles.link} href="#consultant" scroll={true}>
              顾问介绍
            </Link>
            <Link className={styles.link} href="/caseList">
              经典案例
            </Link>
            <Link className={styles.link} href="/insightList">
              行业洞察
            </Link>
            <Link className={styles.link} href="/contactUs">
              联系我们
            </Link>
          </div>
          {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 className={styles["nav-container"]}>
        <div className={styles["main-content"]}>
          <div className={styles.content1}>高潜咨询</div>
          <div className={styles.content2}>助力中国高潜企业加速发展</div>
          <div className={styles.line}></div>
          <br />
          <div className={styles.content4}>
            聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
          </div>
        </div>
      </div>
      <div>
        <div className={styles["nav-background"]}></div>
        <Image
          alt="hero"
          width={1080}
          height={793}
          src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
          className={styles["nav-cover"]}
        />
      </div>
    </div>
  );
};

export default HeaderPC;
