import { CommandPalette } from '@app-actions/command-palette'
import { HeaderProvider } from '@context-providers/header-context-provider'
import { Outlet } from '@tanstack/react-router'

import { ApplicationHeader } from '@components/ui/application-header/application-header'
import { DynamicTabbedSidebar, SidebarInset, SidebarProvider, SidebarTabsProvider } from '@postxl/ui-components'

export const AuthorizedPageLayout = () => {
  return (
    <>
      <CommandPalette />

      <SidebarTabsProvider>
        <SidebarProvider
          defaultOpenSidebars={{ left: true, right: false }}
          defaultWidths={{ left: 300, right: 300 }}
          keyboardShortcuts={{ b: 'left', '.': 'right' }}
          storageKey={'app-sidebar-state'}
        >
          <HeaderProvider>
            <div className="flex flex-col h-screen max-h-screen relative w-full">
              <ApplicationHeader />

              <div className="flex grow relative max-h-[calc(100vh-var(--header-height))]">
                {/* sidebar left */}
                <DynamicTabbedSidebar
                  side="left"
                  orientation="vertical"
                  className="top-[var(--header-height)] h-[calc(100%-var(--header-height))]"
                />

                {/* page content */}
                <SidebarInset className="h-full grid">
                  <Outlet />
                </SidebarInset>

                {/* sidebar right */}
                <DynamicTabbedSidebar
                  side="right"
                  className="top-[var(--header-height)] h-[calc(100%-var(--header-height))]"
                />
              </div>
            </div>
          </HeaderProvider>
        </SidebarProvider>
      </SidebarTabsProvider>
    </>
  )
}
