'use client';

import React, { useState } from 'react'
import TopBar from '../topbar/TopBar'
import SideMenu from '../menu/SideMenu'
import BottomNavBar from '../navigation/BottomNavBar'

type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>

function ClientMenuRouteWrapper({ children }: Props) {
  const [profileDrop, setProfileDrop] = useState(false);
  const [nightMode, setNightMode] = useState(false);
  const [menuState, setMenuState] = useState(false);
  const [searchModal, setSearchModal] = useState(false);

  const toggleProfileDrop = () => {
    setProfileDrop((state) => !state);
  }

  const toggleNightMode = () => {
    setNightMode((state) => !state);
  }

  const toggleMenuState = () => {
    setMenuState((state) => !state);
  }

  const toggleSearchModal = () => {
    setSearchModal((state) => !state);
  }

  // const location = useRouter();

  // useEffect(() => {
  //     setMenuState(false)
  // }, [location])

  return (
    <div className='h-full overflow-hidden py-10 px-4'>
      <header>
        <TopBar
          profileDropState={profileDrop} toggleProfileDropState={toggleProfileDrop}
          menuState={menuState} toggleMenuState={toggleMenuState}
          searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
          nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
      </header>
      <main className="h-full pt-14 pb-14 lg:pt-28 overflow-y-auto noscrollbar">
        {children}
      </main>
      <aside>

        <SideMenu 
          nightModeState={nightMode} togglenightModeState={toggleNightMode}
          menuState={menuState} toggleMenuState={toggleMenuState} />
      </aside>
      <footer>
        <BottomNavBar />

      </footer>
    </div>
  )
}

export default ClientMenuRouteWrapper