import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { ChevronRight, Link as link } from "lucide-react";
import { permissionQuery } from "../../lib/queries/permsCheck";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "../ui/collapsible";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
	useSidebar,
} from "../ui/sidebar";

export default function WarehouseBar() {
	const { data: canCreate = false } = useQuery(
		permissionQuery({
			warehouse: ["read"],
		}),
	);

	const { setOpen } = useSidebar();
	const items = [
		{
			title: "Dock Door Scanning",
			url: "/warehouse",
			//icon,
			isActive: canCreate,
			items: [
				{
					title: "DockDoorScanning",
					icon: link,
					url: "/warehouse/dockdoorscanning",
				},
			],
		},
	];

	return (
		<SidebarGroup>
			<SidebarGroupLabel>Warehouse</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<div key={item.title}>
							{item.isActive && (
								<Collapsible
									asChild
									//defaultOpen={isNotifications}
									className="group/collapsible"
								>
									<SidebarMenuItem>
										<CollapsibleTrigger asChild>
											<SidebarMenuButton tooltip={item.title}>
												{item.title}

												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
											</SidebarMenuButton>
										</CollapsibleTrigger>
										<CollapsibleContent>
											<SidebarMenuSub>
												{item.items?.map((subItem) => (
													<SidebarMenuSubItem key={subItem.title}>
														<SidebarMenuSubButton asChild>
															<Link
																to={subItem.url}
																onClick={() => setOpen(false)}
															>
																<subItem.icon />
																<span>{subItem.title}</span>
															</Link>
														</SidebarMenuSubButton>
													</SidebarMenuSubItem>
												))}
											</SidebarMenuSub>
										</CollapsibleContent>
									</SidebarMenuItem>
								</Collapsible>
							)}
						</div>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}