"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 HeaderMobile: React.FC = () => {
  const [showMenu, setShowMenu] = useState("");

  const hideMenu = () => {
    setShowMenu("hide");
  };

  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-fixed"]}>
        <div
          className={styles["nav-fixed-bar"]}
          onClick={() => {
            if (showMenu == "" || showMenu == "hide") {
              setShowMenu("show");
            } else {
              setShowMenu("hide");
            }
          }}
        >
          <div className={styles.logo}>HIPO 高潜</div>
          <Image alt="menu" width={24} height={15} src="/asset/ic_menu_light.png" className={styles.menu} />
        </div>
        <div className={showMenu === "show" ? styles.show : styles.hide}>
          <div className={styles["nav-sub"]}>
            <Link className={styles.item} href="#" onClick={() => hideMenu()}>
              首页
            </Link>
            <Link className={styles.item} href="/about">
              关于我们
            </Link>
            <Link className={styles.item} href="#service" scroll={true} onClick={() => hideMenu()}>
              业务介绍
            </Link>
            <Link className={styles.item} href="#consultant" scroll={true} onClick={() => hideMenu()}>
              顾问介绍
            </Link>
            <Link className={styles.item} href="/caseList">
              经典案例
            </Link>
            <Link className={styles.item} href="/insightList">
              行业洞察
            </Link>
            <Link className={styles.item} href="/contactUs">
              联系我们
            </Link>
            {isLogin && (
              <>
                <Link className={styles.item} href="#" onClick={() => hideMenu()}>
                  {user?.phone}
                </Link>
                <Link
                  className={styles.item}
                  href="#"
                  onClick={() => {
                    logout();
                    hideMenu();
                  }}
                >
                  退出
                </Link>
              </>
            )}
            {!isLogin && (
              <>
                <Link className={styles.item} href={"/user/login"}>
                  登录
                </Link>
                <Link className={styles.item} href={"/user/register"}>
                  注册
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
      <div className={styles["nav-content"]}>
        <div className={styles.content}>
          <Image
            alt="hero"
            width={400}
            height={600}
            priority={true}
            src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
            className={styles["nav-cover"]}
          />
          <div className={styles["nav-bg"]}></div>
          <div className={styles["text-content"]}>
            <div className={styles.content1}>高潜咨询</div>
            <div className={styles.content2}>助力中国高潜企业加速发展</div>
            <div className={styles.content4}>
              聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default HeaderMobile;
