import LinkList from "@/twui/components/elements/LinkList";
import Main from "@/twui/components/layout/Main";
import Row from "@/twui/components/layout/Row";
import Stack from "@/twui/components/layout/Stack";
import { Fragment, PropsWithChildren, useContext } from "react";
import { AdminAsideLinks } from "./(data)/links";
import Header from "./header";
import { twMerge } from "tailwind-merge";
import Head from "next/head";
import { AppContext } from "@/src/pages/_app";

type Props = PropsWithChildren & {};

export default function Layout({ children }: Props) {
    const { pageProps } = useContext(AppContext);

    return (
        <Fragment>
            <Head>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js" />
            </Head>
            <Main
                className="w-screen h-screen overflow-hidden p-4 lg:p-10"
                id="admin-main"
            >
                <div className="grid-frame grid-cols-6 w-full h-full grid-rows-[64px_47px] xl:grid-rows-[64px_auto]">
                    <Header />
                    <Stack className="grid-cell col-span-6 xl:col-span-1 gap-0">
                        <LinkList
                            links={AdminAsideLinks({ user: pageProps.user })}
                            className="w-full xl:flex-col"
                            linkProps={{
                                className: "turboci-admin-aside-link",
                            }}
                        />
                    </Stack>
                    <Stack
                        className={twMerge(
                            "grid-cell col-span-6 xl:col-span-5 gap-0",
                            "overflow-auto pb-[200px]",
                        )}
                    >
                        {children}
                        <div
                            className="h-[400px] w-full block"
                            style={{ height: "400px" }}
                        />
                    </Stack>
                </div>
            </Main>
        </Fragment>
    );
}
