<script lang="ts">
	import { Separator } from '$lib/components/ui/separator/index.js';

	import SettingsIcon from '@lucide/svelte/icons/settings';
	import UnjsDb0 from '$lib/components/icons/UnjsDb0.svelte';

	import NavMain from './nav-main.svelte';
	import LibrarySwitcher from './library-switcher.svelte';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import type { ComponentProps } from 'svelte';
	import { getLibraryState } from '$lib/state/library.svelte';
	import { page } from '$app/state';

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

	const libraryState = getLibraryState();

	const header = $derived({
		title: 'chitai',
		icon: UnjsDb0,
		url: `/library/${libraryState.activeLibrary!.id}`
	});

	const footer = $derived({
		title: 'Settings',
		url: '/settings',
		icon: SettingsIcon,
		isActive: page.url.pathname.startsWith('/settings')
	});
</script>

<Sidebar.Root variant="floating" {collapsible} {...restProps} class="ml-1 py-3">
	<Sidebar.Header class="h-(--header-height)">
		<Sidebar.MenuButton>
			{#snippet child({ props })}
				<a href={header.url} {...props}>
					<header.icon class="mr-3 scale-175" />
					<span class="text-xl font-semibold">{header.title}</span>
				</a>
			{/snippet}
		</Sidebar.MenuButton>
	</Sidebar.Header>
	<Separator />
	<Sidebar.Content class="mt-4 mr-2 overflow-x-hidden">
		<LibrarySwitcher />
		<NavMain />
	</Sidebar.Content>
	<Sidebar.Footer>
		<Sidebar.MenuButton class="mb-2" isActive={footer.isActive}>
			{#snippet child({ props })}
				<a href={footer.url} {...props}>
					{#if footer.icon}
						<footer.icon class="scale-125" />
					{/if}
					<span class="text-md pl-2">{footer.title}</span>
				</a>
			{/snippet}
		</Sidebar.MenuButton>
	</Sidebar.Footer>
</Sidebar.Root>
