import React, { Fragment } from 'react';
import menus from '@/data/menu'
import SubMenu from './SubMenu';
import './style.less';

export default function NavMenu(props) {

  const { lang } = props;
  const pathPrefix = `/${lang}`;

  const [current, setCurrent] = React.useState();
  const [show, setShow] = React.useState(false);

  const onMouseMove = (e, menu) => {
    setCurrent(menu);
    setShow(menu.children?.length > 0)
  }

  return (
    <Fragment>
      <nav
        id="pageNav"
        className="navbar navbar-expand-lg navbar-light bg-light fixed-top p-0"
        style={{ '--bs-bg-opacity': 0.9 }}
      >
        <div className="container-fluid">
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <a className="navbar-brand" href={`/${lang}/`}>
            <img
              src="../logo.png"
              alt="云致科技"
              width="36"
              className="d-inline-block align-text-top"
            />
            <span className="text-nowrap mx-3">云致科技</span>
          </a>
          <div id="navbarSupportedContent" className="collapse navbar-collapse py-3">
            <div className="me-auto"></div>
      
            <ul id="menu-nav" className="navbar-nav me-auto mb-2 mb-lg-0">
              {
                menus.map((menu) => (
                  <li
                    className="nav-item px-2 text-center"
                    key={menu.path}
                    onMouseMove={(e) => onMouseMove(e, menu)}
                  >
                    <a
                      className="nav-link"
                      aria-current="page"
                      href={`${pathPrefix}${menu.path}`}>{menu.name}</a>
                  </li>
                ))
              }
            </ul>
            <form className="d-flex">
              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
              <button className="btn btn-outline-success" type="submit">Search</button>
            </form>
      
          </div>
        </div>      
      </nav>
              
      <SubMenu
        show={show}
        pathPrefix={pathPrefix}
        menus={current?.children}
        onShowChange={setShow}
      />
    </Fragment>
  );
}
