import {
    createRootRoute,
    Link,
    Outlet,
    useLocation,
} 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";
import ExportInventoryData from "@/components/logistics/warehouse/ExportInventoryData";
import { AddCards } from "@/components/dashboard/AddCards";
import DMButtons from "@/components/logistics/dm/DMButtons";
import { useSettingStore } from "@/lib/store/useSettings";
//import { AddCards } from "@/components/dashboard/AddCards";

// 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();
        const location = useLocation();
        const { settings } = useSettingStore();

        const server = settings.filter((n: any) => n.name === "dbServer");

        return (
            <div className="overflow-hidden">
                <SessionProvider>
                    <ThemeProvider>
                        <nav className="flex justify-end w-full shadow ">
                            <div className="m-2 flex flex-row">
                                {/* Inventory section */}
                                {location.pathname === "/" && (
                                    <div className="m-auto pr-2 flex flex-row gap-2">
                                        <ExportInventoryData />
                                        <AddCards />
                                    </div>
                                )}
                                {/* Demand mgt section this should also include plant token stuff */}
                                {location.pathname === "/dm" && (
                                    <div className="m-auto pr-2 flex flex-row gap-2">
                                        <DMButtons />
                                    </div>
                                )}
                                <div className="m-1">
                                    <ModeToggle />
                                </div>
                                <div className="mr-1 ml-1">
                                    {settings.length > 0 && (
                                        <a
                                            href={`https://${server[0].value}.alpla.net/lst/d`}
                                            target="_blank"
                                        >
                                            LST - Docs
                                        </a>
                                    )}
                                </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>
                                                    <Link to="/passwordChange">
                                                        Password Change
                                                    </Link>
                                                </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>
                        <main>
                            <SidebarProvider defaultOpen={sidebarState}>
                                <AppSidebar />
                                <Toaster expand={true} richColors closeButton />
                                <Outlet />
                            </SidebarProvider>
                        </main>
                    </ThemeProvider>
                </SessionProvider>

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