import { LayoutMain } from '@/pages/auth/modules/BaseHeader';
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Toaster } from '@/components/ui/sonner'
import { AuthProvider } from '@/pages/auth'
import { TooltipProvider } from '@/components/ui/tooltip'
import { useLayoutStore } from '@/pages/auth/store';
import { useShallow } from 'zustand/shallow';
import { stackQueryClient } from '@/modules/query'
import { QueryClientProvider } from '@tanstack/react-query'
import clsx from 'clsx';
export const Route = createRootRoute({
  component: RootComponent,
})


function RootComponent() {
  const store = useLayoutStore(useShallow(state => ({
    showBaseHeader: state.showBaseHeader,
  })));
  return (
    <QueryClientProvider client={stackQueryClient}>
      <div className='h-full overflow-hidden'>
        <LayoutMain />
        <AuthProvider mustLogin={true}>
          <TooltipProvider>
            <main className={clsx('overflow-auto scrollbar', {
              'h-[calc(100%-3rem)]': store.showBaseHeader,
              'h-full': !store.showBaseHeader,
            })}>
              <Outlet />
            </main>
          </TooltipProvider>
        </AuthProvider>
        <TanStackRouterDevtools position="bottom-right" />
        <Toaster />
      </div>
    </QueryClientProvider>
  )
}