import { Link, useRouterState } from "@tanstack/react-router";
import { ChevronRight } from "lucide-react";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "../ui/collapsible";

import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
	useSidebar,
} from "../ui/sidebar";

const docs = [
	{
		title: "Notifications",
		url: "/intro",
		//icon,
		isActive: window.location.pathname.includes("notifications") ?? false,
		items: [
			{
				title: "Reprints",
				url: "/reprints",
			},
			{
				title: "New Blocking order",
				url: "/qualityBlocking",
			},
		],
	},
];
export default function DocBar() {
	const { setOpen } = useSidebar();
	const pathname = useRouterState({
		select: (s) => s.location.pathname,
	});

	const isNotifications = pathname.includes("notifications");

	return (
		<SidebarGroup>
			<SidebarGroupLabel>Docs</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					<SidebarMenuItem key={"docs"}>
						<SidebarMenuButton asChild>
							<Link to={"/docs"} onClick={() => setOpen(false)}>
								{/* <item.icon /> */}
								<span>{"Intro"}</span>
							</Link>
						</SidebarMenuButton>
					</SidebarMenuItem>
				</SidebarMenu>
				<SidebarMenu>
					{docs.map((item) => (
						<Collapsible
							key={item.title}
							asChild
							defaultOpen={isNotifications}
							className="group/collapsible"
						>
							<SidebarMenuItem>
								<CollapsibleTrigger asChild>
									<SidebarMenuButton tooltip={item.title}>
										<Link
											to={"/docs/$"}
											params={{ _splat: `notifications${item.url}` }}
										>
											{item.title}
										</Link>
										<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={"/docs/$"}
														params={{ _splat: `notifications${subItem.url}` }}
													>
														{subItem.title}
													</Link>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										))}
									</SidebarMenuSub>
								</CollapsibleContent>
							</SidebarMenuItem>
						</Collapsible>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}