import { Cat, Printer, Tag } 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 = {
	Printer: Printer,
	Tag: Tag,
	Cat: Cat,
};

export function ProductionSideBar({
	user,
	userRoles,
}: {
	user: User | null;
	userRoles: UserRoles[] | null;
}) {
	//const url: string = window.location.host.split(":")[0];
	const { modules } = useModuleStore();

	const items = modules?.filter((m) => m.category === "production" && m.active);
	const userUpdate = { ...user, roles: userRoles };
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Production</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => {
						if (!item.active) return;
						const Icon = iconMap[item.icon === "" ? "Cat" : item.icon];
						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>
	);
}
