import React, { useState, useEffect } from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { navToggle } from '@vendor-web/js/components/header.js'
import { matchMedia, wheelController } from '@vendor-web/js/extends.js'



// import logo from '@vendor-web/images/logo-fullText-white.svg';

// import '@vendor-web/css/components/header.css';


function Header() {

  const [navOpen, setNavOpen] = useState(false);
  useEffect(() => {
    import('@vendor-web/js/global.js')

    const cleanupNavToggle = navToggle();
    const cleanupMatchMedia = matchMedia();
    const cleanupWheel = wheelController();

    return () => {
      if (typeof cleanupNavToggle === 'function') cleanupNavToggle();
      if (typeof cleanupMatchMedia === 'function') cleanupMatchMedia();
      if (typeof cleanupWheel === 'function') cleanupWheel();
    };

  }, []);
  return (
    <header className="header pageHeader">
      {/* <header className={`header  ${isHeaderTransparent ? 'header--transparent' : ''}`}> */}
      <div className="container header-container">
        <Link
          className="header-logoContainer"
          href={route('home')}>

          <i className="logo-original header-logo header-logoOriginal" />
          <i className="logo-engHorizon header-logo header-logoEngHorizon" />
          <i className="logo-white-engHorizon header-logo header-logoEngHorizon header-logoEngHorizon--transparent"></i>
        </Link>
        {/* <a href={`${route('home')}`} className="header-logoContainer" onClick={(e) => e.preventDefault()}>
          <i className="logo-original header-logo header-logoOriginal" />
          <i className="logo-engHorizon header-logo header-logoEngHorizon" />
        </a> */}
        <div className="header-navContainer">
          <button
            type="button"
            className="button button--icon header-navControl"
            title={`${navOpen ? 'folded' : 'expanded'} navigation`}
            onClick={() => {
              setNavOpen(!navOpen);
            }}
          >
            <i className="icon-menu header-controlIcon header-controlIconMenu" />
            <i className="icon-close header-controlIcon header-controlIconClose" />
          </button>
          <nav className={`${navOpen ? 'header-navOpen' : ''}`}>
            {/* <ul className="header-nav">
              <li className="header-navActive">
                <a className="header-navTarget" href="#">About</a>
              </li>
              <li><a className="header-navTarget" href="#">Impact</a></li>
              <li><a className="header-navTarget" href="#">News & Event</a></li>
              <li><a className="header-navTarget" href="#">Contact us</a></li>
            </ul> */}
            <ul className="header-nav">
              <li className={route().current('about') ? 'header-navActive' : ''}>
                <a className="header-navTarget" href={route('about')}>About</a>
              </li>
              <li className={route().current('impact') ? 'header-navActive' : ''}>
                <a className="header-navTarget" href={route('ai-in-taiwan')}>Impact</a>
              </li>
              <li className={route().current('news') || route().current('news.show') || route().current('event.show') ? 'header-navActive' : ''}>
                <a className="header-navTarget" href={route('news')}>News & Event</a>
              </li>
              <li className={route().current('contact') ? 'header-navActive' : ''}>
                <a className="header-navTarget" href={route('contact')}>Contact us</a>
              </li>
            </ul>
          </nav>
        </div>
        <p className="header-foot">AI for All, All in AI</p>
      </div>
    </header>
  );
}

export default Header;