import {
	Barcode,
	Cat,
	Command,
	Cylinder,
	Database,
	Package,
	Truck,
} from "lucide-react";

import type { UserRoles } from "@/lib/authClient";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "../../../../../../components/ui/sidebar";
import { useModuleStore } from "../../../-lib/store/useModuleStore";
import type { User } from "../../../-types/users";
import { hasPageAccess } from "../../../-utils/userAccess";

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

export function LogisticsSideBar({
	user,
	userRoles,
}: {
	user: User | null;
	userRoles: UserRoles[] | null;
}) {
	const { modules } = useModuleStore();

	const items = modules?.filter((m) => m.category === "logistics");
	const userUpdate = { ...user, roles: userRoles };

	return (
		<SidebarGroup>
			<SidebarGroupLabel>Logistics</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => {
						const Icon = iconMap[item.icon === "" ? "Cat" : item.icon];
						if (!item.active) return;
						return (
							<SidebarMenuItem key={item.module_id}>
								{hasPageAccess(userUpdate as any, item.roles, item.name) && (
									<>
										<SidebarMenuButton asChild>
											<a href={item?.link}>
												<Icon />
												<span>{item?.name}</span>
											</a>
										</SidebarMenuButton>
									</>
								)}
							</SidebarMenuItem>
						);
					})}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
