import { useSuspenseQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { Truck } from "lucide-react";
import { getSettings } from "../../lib/queries/getSettings";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from "../ui/sidebar";

export default function LogisticsSidebar({ session }: any) {
	const { setOpen } = useSidebar();
	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
	const items = [
		{
			title: "Demand Management",
			url: "/logistics/dm",
			icon: Truck,
			role: ["systemAdmin", "admin", "warehouse", "transport"],
			module: "logistics",
			active:
				!isLoading &&
				settings.filter((n: any) => n.name === "demandManagement")[0].active,
		},
	];
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Logistics</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<div key={item.title}>
							{item.role.includes(session.user.role) && item.active && (
								<SidebarMenuItem>
									<SidebarMenuButton asChild>
										<Link to={item.url} onClick={() => setOpen(false)}>
											<item.icon />
											<span>{item.title}</span>
										</Link>
									</SidebarMenuButton>
								</SidebarMenuItem>
							)}
						</div>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
