import { useSuspenseQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { Bell, Logs, Server, Settings, UsersRound } from "lucide-react";
import { getSettings } from "../../lib/queries/getSettings";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from "../ui/sidebar";

// type AdminSidebarProps = {
// 	session: {
// 		user: {
// 			name?: string | null;
// 			email?: string | null;
// 			role?: string | string[];
// 		};
// 	} | null;
//};

export default function AdminSidebar({ session }: any) {
	const { setOpen } = useSidebar();
	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
	const items = [
		{
			title: "Notifications",
			url: "/admin/notifications",
			icon: Bell,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Settings",
			url: "/admin/settings",
			icon: Settings,
			role: ["systemAdmin"],
			module: "admin",
			active: true,
		},
		{
			title: "Servers",
			url: "/admin/servers",
			icon: Server,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Logs",
			url: "/admin/logs",
			icon: Logs,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Users",
			url: "/admin/users",
			icon: UsersRound,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Scan users",
			url: "/admin/scanUsers",
			icon: UsersRound,
			role: ["systemAdmin", "admin", "manager"],
			module: "admin",
			active:
				!isLoading &&
				settings.filter((n: any) => n.name === "mobile")[0].active,
		},
	];
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Admin</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<div key={item.title}>
							{item.role.includes(session.user.role) && item.active && (
								<SidebarMenuItem>
									<SidebarMenuButton asChild>
										<Link to={item.url} onClick={() => setOpen(false)}>
											<item.icon />
											<span>{item.title}</span>
										</Link>
									</SidebarMenuButton>
								</SidebarMenuItem>
							)}
						</div>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}