<script lang="ts">
	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import CheckIcon from '@lucide/svelte/icons/check';
	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';

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

	const bookCollection = getBookCollectionState();
</script>

{#each bookCollection.filterOptions as filter, index (filter.name)}
	<Sidebar.Group class="py-0">
		<Collapsible.Root open={index === 0} class="group/collapsible ">
			<Sidebar.GroupLabel
				class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
			>
				{#snippet child({ props })}
					<Collapsible.Trigger {...props}>
						{filter.name}
						{#if bookCollection.filters[filter.value].length !== 0}
							<div class="ml-2 h-[6px] w-[6px] rounded-full bg-flag"></div>
						{/if}
						<ChevronRightIcon
							class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
						/>
					</Collapsible.Trigger>
				{/snippet}
			</Sidebar.GroupLabel>
			<Collapsible.Content class="h-full max-h-128 overflow-y-auto">
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						{#each filter.items as item (item.id)}
							<Sidebar.MenuItem
								onclick={() => bookCollection.toggleFilter(filter.value, item.id.toString())}
							>
								<Sidebar.MenuButton>
									<div
										data-active={bookCollection.isFilterSelected(filter.value, item.id.toString())}
										class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
									>
										<CheckIcon class="hidden size-3 group-data-[active=true]/calendar-item:block" />
									</div>
									{item?.name || item?.title}
								</Sidebar.MenuButton>
							</Sidebar.MenuItem>
						{/each}
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Collapsible.Content>
		</Collapsible.Root>
	</Sidebar.Group>
	<Sidebar.Separator class="mx-0" />
{/each}
