import { Suspense } from "react";
import { Grid, GridItem } from "@panda/jsx";
import { createFileRoute, Outlet } from "@tanstack/react-router";

import { Aside } from "@/components/Layout/Aside/Aside";
import { Header } from "@/components/Layout/Header/Header";
import { Sidebar } from "@/components/Layout/Sidebar/Sidebar";
import { Loader } from "@/components/Loader";
import { ModalLoader } from "@/components/Modal/ModalLoader";
import { ModalFlows } from "@/components/ModalFlows/ModalFlows";

export const Route = createFileRoute("/_layout")({
  component: Layout,
});

const HEADER_HEIGHT = "63px";
export const SIDEBAR_WIDTH = "150px";
export const SIDEBAR_MINI_WIDTH = "80px";
const ASIDE_WIDTH = "250px";

function Layout() {
  return (
    <Grid
      className={css({
        gridTemplateColumns: "1fr 1fr 1fr",
        gridTemplateRows: "auto",
        gridTemplateAreas: `
          "header header header"
          "main main main"
          "aside aside aside"
          `,
        smToMd: {
          gridTemplateColumns: `${SIDEBAR_MINI_WIDTH} 1fr 1fr 1fr`,
          gridTemplateRows: "auto",
          gridTemplateAreas: `
          "sidebar header header header"
          "sidebar main main main"
          "sidebar aside aside aside"
          `,
        },
        mdToLg: {
          gridTemplateColumns: `${SIDEBAR_WIDTH} 1fr 1fr 1fr`,
          gridTemplateRows: "auto",
          gridTemplateAreas: `
          "sidebar header header header"
          "sidebar main main main"
          "sidebar aside aside aside"
          `,
        },
        lg: {
          gridTemplateColumns: `${SIDEBAR_WIDTH} 1fr 1fr ${ASIDE_WIDTH}`,
          gridTemplateRows: "auto",
          gridTemplateAreas: `
          "sidebar header header header"
          "sidebar main main aside"
          `,
        },
      })}
      gap={0}
    >
      <GridItem gridArea="sidebar">
        <Sidebar />
      </GridItem>
      <GridItem gridArea="header">
        <Header />
      </GridItem>
      <GridItem
        className={css({
          md: { borderRight: "1px solid token(colors.borderThin)" },
        })}
        gridArea="main"
        minHeight={`calc(100svh - ${HEADER_HEIGHT})`}
        position="relative"
      >
        <Suspense fallback={<Loader />}>
          <Outlet />
        </Suspense>
        <Suspense fallback={<ModalLoader />}>
          <ModalFlows />
        </Suspense>
      </GridItem>
      <GridItem
        className={css({
          md: {
            alignSelf: "start",
            position: "sticky",
            top: 0,
          },
        })}
        gridArea="aside"
      >
        <Aside />
      </GridItem>
    </Grid>
  );
}

export default Layout;