<script lang="ts">
	import NavUser from "$lib/components/molecules/sidebar/nav-user.svelte";
	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
	import type { ComponentProps } from "svelte";

	import Icon from "$lib/components/atoms/icon.svelte";
	import { adminSiteNavMap } from "$lib/core/constants";
	import { sessionUserInfo } from "$lib/stores/session.info";
	import ProductIcon from "~icons/carbon/carbon-for-ibm-product";
	import SessionIcon from "~icons/carbon/prompt-session";
	import HistoryIcon from "~icons/iconamoon/history-light";
	import PackageIcon from "~icons/solar/box-broken";
	import DashboardIcon from "~icons/solar/laptop-minimalistic-broken";

	const mainLinks = [
		{
			icon: DashboardIcon,
			title: "Dashboard",
			url: adminSiteNavMap.dashboard,
		},
		{
			icon: SessionIcon,
			title: "Live Sessions",
			url: adminSiteNavMap.sessions.live,
		},
		{
			icon: HistoryIcon,
			title: "Session History",
			url: adminSiteNavMap.sessions.history,
		},
		{
			icon: PackageIcon,
			title: "Orders",
			url: adminSiteNavMap.orders,
		},

		{
			icon: ProductIcon,
			title: "Products",
			url: adminSiteNavMap.products,
		},
	];

	let {
		ref = $bindable(null),
		collapsible = "icon",
		...restProps
	}: ComponentProps<typeof Sidebar.Root> = $props();
</script>

<Sidebar.Root bind:ref {collapsible} {...restProps}>
	<Sidebar.Content>
		<Sidebar.Group>
			<Sidebar.GroupLabel>Application</Sidebar.GroupLabel>
			<Sidebar.GroupContent>
				<Sidebar.Menu>
					{#each mainLinks as item}
						<Sidebar.MenuItem>
							<Sidebar.MenuButton>
								{#snippet child({ props })}
									<a href={item.url} {...props}>
										<Icon icon={item.icon} cls="w-auto h-6" />
										<span>{item.title}</span>
									</a>
								{/snippet}
							</Sidebar.MenuButton>
						</Sidebar.MenuItem>
					{/each}
				</Sidebar.Menu>
			</Sidebar.GroupContent>
		</Sidebar.Group>
	</Sidebar.Content>

	<Sidebar.Footer>
		<NavUser
			user={{
				username: $sessionUserInfo.username,
				email: $sessionUserInfo.email,
			}}
		/>
	</Sidebar.Footer>
	<Sidebar.Rail />
</Sidebar.Root>
