'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-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">

      <div className="z-50 fixed right-4 left-4 md:right-[188px] xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]">
        <TopBar
          profileDropState={profileDrop}
          toggleProfileDropState={toggleProfileDrop}
          menuState={menuState}
          toggleMenuState={toggleMenuState}
          searchModalState={searchModal}
          toggleSearchModalState={toggleSearchModal}
          nightModeState={nightMode}
          toggleNightModeState={toggleNightMode}
        />
      </div>


      <div className="fixed bottom-0 left-0 right-0 z-50 px-4">
        <BottomNavBar />
      </div>


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


      <main
        className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full md:w-[calc(100%-175px)] xl:w-[calc(100%-285px)] md:self-end"
      >
        {children}
      </main>
    </div>

  )
}

export default ClientMenuRouteWrapper