import { AppShell } from '@mantine/core';
import { PropsWithChildren } from 'react';
import Header from './header';
import Navbar from './navbar';
import Pullable from './pullable';
import useVisualViewportSize from '../hooks/use-visual-viewport-size';
import useRouterConfig from '../hooks/use-router-config';
import Page from '@/components/page';
import './route-transition.css';

const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  const { header, withPadding, fullWidth } = useRouterConfig();
  const viewport = useVisualViewportSize();

  return (
    <AppShell
      id='app-shell'
      layout='alt'
      header={{ height: 60, collapsed: header.collapsed }}
      navbar={{
        width: { base: 0, sm: 100, md: 200, lg: 300 },
        breakpoint: 'sm',
        collapsed: { mobile: true },
      }}
      aside={{
        width: { base: 0, sm: 100, md: 200, lg: 300 },
        breakpoint: 'sm',
        collapsed: { desktop: false, mobile: true }
      }}
      pos='relative'
      h='100dvh'
      mah='100dvh'
      style={{
        height: `${viewport.height}px`,
        minHeight: '100dvh',
        // top: viewport.top
      }}
    >
      <Header {...header} elevated={scrollPosition.y > 2} />
      <AppShell.Main
        pos='relative'
        h='100%'
        mah='100%'
        pb={{ base: 'calc(65px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
        px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
        maw='100dvw'
        style={{ overflow: 'hidden' }}
      >
        <Pullable>
          <Page noPadding={!withPadding} fullWidth={fullWidth}>
            {children}
          </Page>
        </Pullable>
      </AppShell.Main>
      <Navbar />
      <AppShell.Aside withBorder />
    </AppShell>
  );
}

export default Layout;