import {createRootRoute, Link, Outlet} from "@tanstack/react-router";
//import {TanStackRouterDevtools} from "@tanstack/router-devtools";
import Cookies from "js-cookie";
import {SidebarProvider} from "../components/ui/sidebar";
import {ThemeProvider} from "../components/layout/theme-provider";
import {ModeToggle} from "../components/layout/mode-toggle";
import {AppSidebar} from "../components/layout/lst-sidebar";
import {Avatar, AvatarFallback, AvatarImage} from "../components/ui/avatar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
import {SessionProvider} from "../components/providers/Providers";
import {Toaster} from "sonner";
import {Button} from "../components/ui/button";

import {useSessionStore} from "../lib/store/sessionStore";
import {useSession} from "@/hooks/useSession";
import {useLogout} from "@/hooks/useLogout";

// same as the layout
export const Route = createRootRoute({
    component: () => {
        const sidebarState = Cookies.get("sidebar_state") === "true";
        const {session} = useSession();
        const {user} = useSessionStore();
        const logout = useLogout();

        return (
            <>
                <SessionProvider>
                    <ThemeProvider>
                        <nav className="flex justify-end">
                            <div className="m-2 flex flex-row">
                                <div className="m-auto pr-2">
                                    <p>Add Card</p>
                                </div>
                                <div className="m-1">
                                    <ModeToggle />
                                </div>
                                {session ? (
                                    <div className="m-1">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger>
                                                <Avatar>
                                                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                                                    <AvatarFallback>CN</AvatarFallback>
                                                </Avatar>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent>
                                                <DropdownMenuLabel>Hello {user?.username}</DropdownMenuLabel>
                                                <DropdownMenuSeparator />
                                                <DropdownMenuItem>Profile</DropdownMenuItem>
                                                <DropdownMenuItem>Billing</DropdownMenuItem>
                                                <DropdownMenuItem>Team</DropdownMenuItem>
                                                <DropdownMenuItem>Subscription</DropdownMenuItem>
                                                <hr className="solid"></hr>
                                                <DropdownMenuItem>
                                                    <div className="m-auto mt-3">
                                                        <Button onClick={() => logout()} variant="ghost">
                                                            Logout
                                                        </Button>
                                                    </div>
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </div>
                                ) : (
                                    <>
                                        <Link to="/login">Login</Link>
                                    </>
                                )}
                            </div>
                        </nav>
                        <SidebarProvider defaultOpen={sidebarState}>
                            <AppSidebar />
                            <Toaster expand={true} richColors closeButton />
                            <Outlet />
                        </SidebarProvider>
                    </ThemeProvider>
                </SessionProvider>

                {/* <TanStackRouterDevtools position="bottom-right" /> */}
            </>
        );
    },
});