import { Forklift, Hourglass, Minus, Plus, Signature } from "lucide-react";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "../../../../../../components/ui/collapsible";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
} from "../../../../../../components/ui/sidebar";

const items = [
	{
		title: "Gemone",
		url: "#",
		icon: Forklift,
		isActive: false,
	},
];

const data = {
	navMain: [
		{
			title: "Forklift Management",
			url: "#",
			icon: Forklift,
			items: [
				{
					title: "All Forklifts",
					url: "#",
					icon: Forklift,
				},
				{
					title: "Leasing data",
					url: "#",
					isActive: false,
					icon: Signature,
				},
				{
					title: "Forklift Hours",
					url: "#",
					isActive: false,
					icon: Hourglass,
				},
			],
		},
	],
};

export function ForkliftSideBar() {
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Forklift Section</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{data.navMain.map((item, index) => (
						<Collapsible
							key={item.title}
							defaultOpen={index === 1}
							className="group/collapsible"
						>
							<SidebarMenuItem>
								<CollapsibleTrigger asChild>
									<SidebarMenuButton>
										<item.icon />
										{item.title}{" "}
										<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
										<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
									</SidebarMenuButton>
								</CollapsibleTrigger>
								{item.items?.length ? (
									<CollapsibleContent>
										<SidebarMenuSub>
											{item.items.map((item) => (
												<SidebarMenuSubItem key={item.title}>
													<SidebarMenuSubButton
														asChild
														isActive={item.isActive}
													>
														<a href={item.url}>
															<item.icon />
															<span>{item.title}</span>
														</a>
													</SidebarMenuSubButton>
												</SidebarMenuSubItem>
											))}
										</SidebarMenuSub>
									</CollapsibleContent>
								) : null}
							</SidebarMenuItem>
						</Collapsible>
					))}
				</SidebarMenu>
				<SidebarMenu>
					{items.map((item) => (
						<SidebarMenuItem key={item.title}>
							<SidebarMenuButton asChild>
								<a href={item.url}>
									<item.icon />
									<span>{item.title}</span>
								</a>
							</SidebarMenuButton>
						</SidebarMenuItem>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
