<script lang="ts">
	import SearchForm from "./search-form.svelte";
	import VersionSwitcher from "./switcher.svelte";
	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
	import type { ComponentProps } from "svelte";
	import { page } from "$app/state";
	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();

	type NavData = {
		navMain: {
			title: string;
			url: string;
			items: {
				title: string;
				url: string;
				isActive?: boolean;
			}[];
		}[];
	};

	const isAdmin = $derived(page.url.pathname.startsWith("/admin"));
	const regularData: NavData = $state({
		navMain: [
			// {
			// 	title: "Empfang",
			// 	url: "/entry",
			// 	items: [
			// 		{
			// 			title: "Empfang",
			// 			url: "/entry"
			// 		},
			// 	],
			// },
			{
				title: "Räume",
				url: "#",
				items: [
					{
						title: "1",
						url: "/room/1",
					},
					{
						title: "2",
						url: "/room/2",
					},
					{
						title: "4",
						url: "/room/4",
					},
					{
						title: "5",
						url: "/room/5",
					},
					{
						title: "6",
						url: "/room/6",
					},
					{
						title: "7",
						url: "/room/7",
					},
					{
						title: "8",
						url: "/room/8",
					},
					{
						title: "Roe",
						url: "/room/Roe",
					},
				],
			},
			// {
			// 	title: "Tickets",
			// 	url: "#",
			// 	items: [
			// 		{
			// 			title: "001",
			// 			url: "/ticket/001",
			// 		},
			// 		{
			// 			title: "002",
			// 			url: "/ticket/002",
			// 		},
			// 	],
			// },
			{
				title: "Mehr",
				url: "#",
				items: [
					{
						title: "Display",
						url: "/display",
					},
					{
						title: "Logs",
						url: "/log",
					},
					{
						title: "Admin",
						url: "/admin",
					},
				]
			}
		],
	});
	const adminData: NavData = {
		navMain: [
			{
				title: "Admin",
				url: "/admin",
				items: [
					{
						title: "Räume",
						url: "#",
						isActive: true
					}
				]
			},
			{
				title: "Mehr",
				url: "#",
				items: [
					{
						title: "Display",
						url: "/display"
					},
					{
						title: "Logs",
						url: "/log",
					},
					{
						title: "Admin",
						url: "/",
						isActive: true
					},
				]
			}
		]
	};

	const data = $derived(isAdmin ? adminData : regularData);
</script>
<Sidebar.Root {...restProps} bind:ref variant="floating">
	<Sidebar.Header>
		<!-- <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} /> -->
		<h2 style="text-align: center; font-weight: bold; font-size: 1.8em;">⏭️ NextUp</h2>
		<SearchForm />
	</Sidebar.Header>
	<Sidebar.Content>
		<!-- We create a Sidebar.Group for each parent. -->
		{#each data.navMain as group (group.title)}
			<Sidebar.Group style={group.title === "Mehr" ? "margin-top: auto;" : ""}>
				<Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						{#each group.items as item (item.title)}
							<Sidebar.MenuItem>
								<Sidebar.MenuButton isActive={item.isActive == undefined ? page.url.pathname === item.url : item.isActive!}>
									{#snippet child({ props })}
										<a href={item.url} {...props}>{item.title}</a>
									{/snippet}
								</Sidebar.MenuButton>
							</Sidebar.MenuItem>
						{/each}
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>
		{/each}
	</Sidebar.Content>
	<Sidebar.Rail />
</Sidebar.Root>