import { useRef, useEffect } from 'react'
import { HashRouter as Router, Routes, Route, NavLink } from 'react-router-dom'
import { LanPage } from './pages/LanPage'
import { MainRelayPage } from './pages/MainRelayPage'
import { ElevatorPage } from './pages/ElevatorPage'
import { DevicePage } from './pages/DevicePage'

function Header() {
  const menuRef = useRef<HTMLDivElement>(null)
  const burgerRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    const burger = burgerRef.current
    if (!burger) return
    burger.addEventListener('click', () => {
      menuRef.current?.classList.toggle('is-active')
      burger.classList.toggle('is-active')
    })
    return () => burger.removeEventListener('click', () => {})
  }, [])

  return (
    <nav className="navbar is-dark fixed-top" role="navigation" aria-label="main navigation">
      <div className="container">
        <div className="navbar-brand">
          <NavLink to="/" className="navbar-item has-text-weight-bold">
            Config Panel
          </NavLink>
          <button ref={burgerRef} className="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </button>
        </div>
        <div ref={menuRef} className="navbar-menu">
          <div className="navbar-start">
            <NavLink to="/" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>LAN</NavLink>
            <NavLink to="/relay" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Relay</NavLink>
            <NavLink to="/elevator" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Elevator</NavLink>
            <NavLink to="/device" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Device</NavLink>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default function App() {
  return (
    <Router>
      <Header />
      <main className="main-content" style={{ paddingTop: '4rem' }}>
        <Routes>
          <Route path="/" element={<LanPage />} />
          <Route path="/relay" element={<MainRelayPage />} />
          <Route path="/elevator" element={<ElevatorPage />} />
          <Route path="/device" element={<DevicePage />} />
          <Route path="*" element={<LanPage />} />
        </Routes>
      </main>
    </Router>
  )
}