"use client";

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

const NavMobile: 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.header}
          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_dark.png" className={styles.menu} />
        </div>
        <div className={styles["nav-line"]} />
        <div className={showMenu === "show" ? styles.show : styles.hide}>
          <div className={styles["nav-sub"]}>
            <Link className={styles.item} href="/">
              首页
            </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.link} 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>
    </>
  );
};

export default NavMobile;
