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">
                            <button onClick={() => logout()}>Logout</button>
                          </div>
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                ) : (
                  <div>
                    <Link to="/login">Login</Link>
                  </div>
                )}
              </div>
            </nav>
            <SidebarProvider defaultOpen={sidebarState}>
              <AppSidebar />
              <Toaster expand={true} richColors closeButton />
              <Outlet />
            </SidebarProvider>
          </ThemeProvider>
        </SessionProvider>

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