import { Link } from "@tanstack/react-router";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarTrigger,
} from "../../../../../components/ui/sidebar";
import {
	useAuth,
	userAccess,
	useUserRoles,
} from "../../../../../lib/authClient";

import { AdminSideBar } from "./side-components/admin";
import { Header } from "./side-components/header";
import { LogisticsSideBar } from "./side-components/logistics";
import { ProductionSideBar } from "./side-components/production";

export function AppSidebar() {
	const { session } = useAuth();
	const { userRoles } = useUserRoles();

	return (
		<Sidebar collapsible="icon">
			<SidebarContent>
				<Header />

				<ProductionSideBar user={session?.user as any} userRoles={userRoles} />

				{/* userAccess("logistics", ["systemAdmin", "admin","manager","viewer"]) */}
				<LogisticsSideBar user={session?.user as any} userRoles={userRoles} />
				{userAccess(null, ["systemAdmin"]) && (
					<>
						{/* <ForkliftSideBar />
						<EomSideBar />
						<QualitySideBar /> */}
						<AdminSideBar />
					</>
				)}
			</SidebarContent>
			<SidebarFooter>
				<SidebarMenuItem>
					<SidebarMenuButton asChild>
						<Link to={"/changelog"}>Changelog</Link>
					</SidebarMenuButton>
				</SidebarMenuItem>
				<SidebarTrigger />
			</SidebarFooter>
		</Sidebar>
	);
}