import React from "react";
import { useMatches } from "react-router";
import { useShallow } from "zustand/react/shallow";
import { useServerListStore } from "~/stores/server-list-store";
import { CreateServerButton } from "./custom-ui/create-server-button";
import { HomeButton } from "./custom-ui/home-button";
import { ServerButton } from "./custom-ui/server-button";
import UserStatus from "./custom-ui/user-status";
import { ScrollArea } from "./ui/scroll-area";
import { Separator } from "./ui/separator";

interface AppLayoutProps {
    children: React.ReactNode;
}

export default function AppLayout({ children }: AppLayoutProps) {
    let servers = useServerListStore(useShallow((state) => Object.values(state.servers)))

    const matches = useMatches();

    let list = React.useMemo(() => {
        return matches.map(match => (match.handle as {
            listComponent?: React.ReactNode
        })?.listComponent).reverse().find(component => !!component)
    }, [matches])

    return (
        <div className="flex h-screen w-screen overflow-hidden">
            <div className="grid h-full max-h-screen bg-background min-w-80  border-r-2" style={{ gridTemplateColumns: "auto 1fr", gridTemplateRows: "1fr auto" }}>
                <div className="col-start-1 row-start-1 col-span-1 row-span-1 overflow-hidden border-r-2 min-w-fit">
                    <ScrollArea className="h-full px-1" scrollbarSize="none">
                        <aside className="flex flex-col gap-4 p-2 h-full">
                            <HomeButton />
                            <Separator />
                            {
                                servers.map((server, _) =>
                                    <React.Fragment key={server.id}>
                                        <ServerButton server={server} />
                                    </React.Fragment>
                                )
                            }
                            {servers.length > 0 && <Separator />}
                            <CreateServerButton />
                        </aside>
                    </ScrollArea>
                </div>
                <div className="col-start-2 row-start-1 col-span-1 row-span-1 overflow-hidden">
                    {list}
                </div>

                <div className="col-start-1 row-start-2 col-span-2 row-span-1 mb-2 mx-2 min-w-fit z-1">
                    <UserStatus />
                </div>
            </div>

            <div className="grow">
                {children}
            </div>
        </div>
    )
}