import { AppShell } from '@mantine/core';
import { PropsWithChildren, useState } from 'react';
import Header from './header';
import Navbar from './navbar';
import useHeaderConfig from '../hooks/use-header-config';
import Pullable from './pullable';
import useVisualViewportSize from '../hooks/use-visual-viewport-size';

const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  const headerConfig = useHeaderConfig();
  const viewport = useVisualViewportSize();
  const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });

  return (
    <AppShell
      id='app-shell'
      layout='alt'
      header={{ height: 60, collapsed: headerConfig.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={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
    >
      <Header scrollPosition={scrollPosition} {...headerConfig} />
      <AppShell.Main
        pos='relative'
        h='100%'
        mah='100%'
        pb={{ base: 70, md: 0 }}
        px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
        style={{ transition: 'none' }}
      >
        <Pullable scrollPosition={scrollPosition} onScrollPositionChange={setScrollPosition}>
          {children}
        </Pullable>
      </AppShell.Main>
      <Navbar />
      <AppShell.Aside withBorder />
    </AppShell>
  );
}

export default Layout;