import React, {useState} from 'react';
import {enquireScreen} from 'enquire-js';
import icMenu from '../asset/ic_menu.png';

let isMobile: any;
enquireScreen((b: any) => {
  isMobile = b;
});

const Nav: React.FC = (props) => {
  const [showMenu, setShowMenu] = useState('');

  const isCurrent = (title: string) => {
    return title == props.title;
  }


  return isMobile ? (
    <div className="nav-fixed">
      <div
        className="header"
        onClick={() => {
          if (showMenu == '' || showMenu == 'hide') {
            setShowMenu('show');
          } else {
            setShowMenu('hide');
          }
        }}
      >
        <div className="logo">HIPO 高潜</div>
        <img src={icMenu} className="menu"/>
      </div>
      <div className="nav-line"/>
      <div className={showMenu} style={{overflow: 'hidden', height: 0}}>
        <div className="nav-sub">
          <a href="/">
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              首页
            </div>
          </a>
          <a href="/about">
            <div
              className={"item"}
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              关于我们
            </div>
          </a>
          <a href="/#service">
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              业务介绍
            </div>
          </a>
          <a href="/#consultant">
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              顾问介绍
            </div>
          </a>
          <a href="/caseList">
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              经典案例
            </div>
          </a>
          <a href="/contactUs">
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              联系我们
            </div>
          </a>
          <a href={'/user/login'}>
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              登录
            </div>
          </a>
          <a href={'/user/register'}>
            <div
              className="item"
              onClick={() => {
                setShowMenu('hide');
              }}
            >
              注册
            </div>
          </a>
        </div>
      </div>
    </div>
  ) : (
    <div className="nav">
      <div className="nav-bar">
        <div className="navbar-brand">
          <a href={'/'}>
            <div className="logo">HIPO 高潜</div>
          </a>
        </div>
        <div className="navbar-collapse">
          <div className="navbar-content">
            <a className="link" href="/">
              首页
            </a>
            <a className={isCurrent("关于我们") ? "linkChecked" : "link"} href="/about">
              关于我们
            </a>
            <a className="link" href="/#service">
              业务介绍
            </a>
            <a className={isCurrent("顾问介绍") ? "linkChecked" : "link"} href="/#consultant">
              顾问介绍
            </a>
            <a className={isCurrent("经典案例") ? "linkChecked" : "link"} href="/caseList">
              经典案例
            </a>
            <a className={isCurrent("联系我们") ? "linkChecked" : "link"} href="/contactUs">
              联系我们
            </a>
            <a className="link" href={'/user/login'}>
              登录
            </a>
            <a className="link" href={'/user/register'}>
              注册
            </a>
          </div>
        </div>
      </div>
      <div className="nav-line"/>
    </div>
  );
};

export default Nav;
