import { useSuspenseQuery } from "@tanstack/react-query";
import {
	Sidebar,
	SidebarContent,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useSession } from "@/lib/auth-client";
import { getSettings } from "../../lib/queries/getSettings";
import AdminSidebar from "./AdminBar";
import DocBar from "./DocBar";
import MobileBar from "./MobileBar";

export function AppSidebar() {
	const { data: session } = useSession();
	const { data: settings, isLoading } = useSuspenseQuery(getSettings());

	return (
		<Sidebar
			variant="sidebar"
			collapsible="offcanvas"
			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
		>
			<SidebarHeader>
				<SidebarMenu>
					<SidebarMenuItem>
						<SidebarContent>
							<DocBar />
							{!isLoading &&
								settings.filter((n: any) => n.name === "mobile")[0].active && (
									<MobileBar />
								)}

							{session &&
								(session.user.role === "admin" ||
									session.user.role === "systemAdmin" ||
									session.user.role === "manager") && (
									<AdminSidebar session={session} />
								)}
						</SidebarContent>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarHeader>
		</Sidebar>
	);
}