<script lang="ts">
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import type { ComponentProps } from 'svelte';
	import { ChevronsRight, FunnelX } from '@lucide/svelte';
	import Filters from './filters.svelte';

	import { getBookCollectionState } from '$lib/state/bookCollection.svelte';

	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();

	const sidebar = Sidebar.useSidebar('FILTER_SIDEBAR');
	const bookCollection = getBookCollectionState();
</script>

<Sidebar.Root
	side="right"
	collapsible="offcanvas"
	variant="floating"
	contextKey="FILTER_SIDEBAR"
	{...restProps}
>
	<Sidebar.Header class="h-16 items-center justify-center border-sidebar-border">
		Filter Menu
	</Sidebar.Header>
	<Sidebar.Content class="overflow-hidden">
		<Sidebar.Separator class="mx-0" />
		<Filters />
	</Sidebar.Content>
	<Sidebar.Footer>
		<Sidebar.Menu>
			<Sidebar.MenuItem onclick={() => bookCollection.clearFilters()}>
				<Sidebar.MenuButton>
					<FunnelX />
					<span>Clear Filters</span>
				</Sidebar.MenuButton>
			</Sidebar.MenuItem>

			<Sidebar.MenuItem onclick={sidebar.toggle}>
				<Sidebar.MenuButton>
					<ChevronsRight />
					<span>Hide Menu</span>
				</Sidebar.MenuButton>
			</Sidebar.MenuItem>
		</Sidebar.Menu>
	</Sidebar.Footer>
</Sidebar.Root>
