import { Barcode, Command, Cylinder, Package, Truck } from "lucide-react";
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
import { User } from "@/types/users";
import { hasPageAccess } from "@/utils/userAccess";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "../../ui/sidebar";

const iconMap: any = {
	Package: Package,
	Truck: Truck,
	Cylinder: Cylinder,
	Barcode: Barcode,
	Command: Command,
};

export function LogisticsSideBar({ user }: { user: User | null }) {
	const { subModules } = useSubModuleStore();

	const items = subModules.filter((m) => m.moduleName === "logistics");

	return (
		<SidebarGroup>
			<SidebarGroupLabel>Logistics</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => {
						const Icon = iconMap[item.icon];
						return (
							<SidebarMenuItem key={item.submodule_id}>
								<>
									{hasPageAccess(user, item.roles, item.name) && (
										<SidebarMenuButton asChild>
											<a href={item.link}>
												<Icon />
												<span>{item.name}</span>
											</a>
										</SidebarMenuButton>
									)}
								</>
							</SidebarMenuItem>
						);
					})}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
