import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarTrigger,
} from "../../../../../components/ui/sidebar";
import {
	useAuth,
	userAccess,
	useUserRoles,
} from "../../../../../lib/authClient";
import { useModuleStore } from "../../-lib/store/useModuleStore";
import { AdminSideBar } from "./side-components/admin";
import { EomSideBar } from "./side-components/eom";
import { ForkliftSideBar } from "./side-components/forklift";
import { Header } from "./side-components/header";
import { LogisticsSideBar } from "./side-components/logistics";
import { ProductionSideBar } from "./side-components/production";
import { QualitySideBar } from "./side-components/quality";

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

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

				<ProductionSideBar
					user={session?.user as any}
					moduleID={
						modules.filter((n) => n.name === "production")[0]
							?.module_id as string
					}
				/>

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