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

export default function DocBar() {
	const { setOpen } = useSidebar();
	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
	const pathname = useRouterState({
		select: (s) => s.location.pathname,
	});

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

	const docs = [
		{
			title: "Notifications",
			url: "notifications/intro",
			//icon,
			isActive: true,
			items: [
				{
					title: "Reprints",
					icon: ScrollText,
					url: "notifications/reprints",
				},
				{
					title: "New Blocking order",
					icon: ScrollText,
					url: "notifications/qualityBlocking",
				},
			],
		},
		{
			title: "Mobile",
			url: "mobile/updateInstructions",
			isActive:
				!isLoading &&
				settings.filter((n: any) => n.name === "mobile")[0].active,
			items: [
				{
					title: "Update Instructions",
					icon: ScrollText,
					url: "mobile/updateInstructions",
				},
				// {
				// 	title: "Settings",
				// 	icon: ScrollText,
				// 	url: "mobile/mobile-settings",
				// },
			],
		},
	];

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