import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";

import type { QueryClient } from "@tanstack/react-query";
import { Toaster } from "sonner";
import Cookies from "js-cookie";
import { SessionGuard } from "../lib/providers/SessionProvider";
import Nav from "../components/navBar/Nav";
import { ThemeProvider } from "../lib/providers/theme-provider";
import { SidebarProvider } from "../components/ui/sidebar";
import SideBarNav from "../components/navBar/SideBarNav";

interface RootRouteContext {
    queryClient: QueryClient;
    //user: User | null;
    //login: (user: User) => void;
    //logout: () => void;
}

const RootLayout = () => {
    //const { logout, login } = Route.useRouteContext();
    const defaultOpen = Cookies.get("sidebar_state") === "true";
    return (
        <div>
            <SessionGuard>
                <ThemeProvider>
                    <div className="flex flex-col h-screen overflow-hidden">
                        <Nav />
                        <div className="flex  flex-1 overflow-hidden">
                            <SidebarProvider defaultOpen={defaultOpen}>
                                <SideBarNav />
                                <div className="flex-2 overflow-y-auto">
                                    <Outlet />
                                </div>
                            </SidebarProvider>
                        </div>
                        <Toaster expand richColors closeButton />
                    </div>
                </ThemeProvider>
            </SessionGuard>
        </div>
    );
};

export const Route = createRootRouteWithContext<RootRouteContext>()({
    component: RootLayout,
});