import {
	createFileRoute,
	Link,
	Outlet,
	useRouterState,
} from "@tanstack/react-router";
import Cookies from "js-cookie";
import { Button } from "@/components/ui/button";
import { ModeToggle } from "../../../components/mode-toggle";
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "../../../components/ui/avatar";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "../../../components/ui/dropdown-menu";
import { SidebarProvider } from "../../../components/ui/sidebar";
import { useAuth, useLogout } from "../../../lib/authClient";
import { AddCards } from "./-components/dashboard/AddCards";
import { AppSidebar } from "./-components/layout/lst-sidebar";
import DMButtons from "./-components/logistics/dm/DMButtons";
import ExportInventoryData from "./-components/logistics/warehouse/ExportInventoryData";

export const Route = createFileRoute("/_old/old")({
	component: RouteComponent,
});

function RouteComponent() {
	const sidebarState = Cookies.get("sidebar_state") === "true";
	const { session } = useAuth();
	const logout = useLogout();
	const router = useRouterState();
	const currentPath = router.location.href;
	//const { settings } = useSettingStore();
	//console.log(location.pathname);
	return (
		<div>
			<nav className="flex justify-end w-full shadow ">
				<div className="m-2 flex flex-row">
					{/* Inventory section */}
					{(location.pathname === "/lst/app/old" ||
						location.pathname === "/lst/app/old/") && (
						<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 === "/lst/app/old/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}prod.alpla.net/lst/d`}
								target="_blank"
							>
								LST - Docs |
							</a>
						)}
					</div> */}
					<Button className="m-1">
						<Link to="/">New Version</Link>
					</Button>
					{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 {session.user?.username}
									</DropdownMenuLabel>
									<DropdownMenuSeparator />
									<DropdownMenuItem>
										{/* <Link to="/passwordChange">Password Change</Link> */}
									</DropdownMenuItem>
									<DropdownMenuItem>
										<Link to="/user/profile">Profile</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>
					) : (
						<Button className="m-1">
							<Link to="/login" search={{ redirect: currentPath }}>
								Login
							</Link>
						</Button>
					)}
				</div>
			</nav>
			<SidebarProvider defaultOpen={sidebarState}>
				<AppSidebar />
				<Outlet />
			</SidebarProvider>
		</div>
	);
}
