'use client';

import React, { useEffect } from 'react'
import TopBar from '../topbar/TopBar'
import SideMenu from '../menu/SideMenu'
import BottomNavBar from '../navigation/BottomNavBar'
import useToggle from '@/hooks/helpers/useToggle';
import { usePathname, useRouter } from 'next/navigation';
import usePreference from '@/hooks/helpers/usePreference';

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

function ClientMenuRouteWrapper({ children }: Props) {
  const { state: profileDrop, toggle: _toggleProfileDrop } = useToggle(false);
  const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
  const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
  const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
  const router = useRouter();
  const pathname = usePathname();

  const toggleProfileDrop = () => {
    _toggleProfileDrop();
  }

  const toggleNightMode = () => {
    _toggleNightMode();
  }

  const toggleMenuState = () => {
    _toggleMenuState();
  }

  const toggleSearchModal = () => {
    _toggleSearchModal();
  }

  const location = usePathname();

  useEffect(() => {
    if (menuState) {
      setMenuState(false)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [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 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-container 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-45 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 xl:w-[calc(100%-285px)] md:self-end"
      >
        {children}
      </main>
    </div>

  )
}

export default ClientMenuRouteWrapper