<script lang="ts">
    import { page } from '$app/state';
    import * as Collapsible from '$lib/components/ui/collapsible/index.js';
    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
    import { Badge } from "$lib/components/ui/badge/index.js";
    import { getBookshelfState } from '$lib/state/bookshelf.svelte';
    import { getLibraryState } from '$lib/state/library.svelte';
    import { House, LibraryBig, Rows3, ChevronRightIcon } from '@lucide/svelte';

    const libraryState = getLibraryState();
    const bookshelfState = getBookshelfState();

    let items = $derived(
        [
            {
                title: 'Home',
                url: `/library/${libraryState.activeLibrary?.id}`,
                icon: House
            },
            {
                title: 'Library',
                url: `/library/${libraryState.activeLibrary?.id}/view`,
                icon: LibraryBig
            },
            {
                title: 'Shelves',
                url: '#',
                icon: Rows3,
                shelves: []
            }
        ].map((item) => ({
            ...item,
            isActive: page.url.pathname === item.url
        }))
    );
</script>

<Sidebar.Group>
    <Sidebar.Menu>
        {#each items as item (item.title)}
            {#if 'shelves' in item}
                <Collapsible.Root open={item.isActive} class="group/collapsible">
                    {#snippet child({ props })}
                        <Sidebar.MenuItem {...props}>
                            <Collapsible.Trigger>
                                {#snippet child({ props })}
                                    <Sidebar.MenuButton {...props} tooltipContent={item.title} class="h-10">
                                        {#if item.icon}
                                            <item.icon class="scale-125" />
                                        {/if}
                                        <span class="text-md ml-2">{item.title}</span>
                                        <ChevronRightIcon
                                            class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                                        />
                                    </Sidebar.MenuButton>
                                {/snippet}
                            </Collapsible.Trigger>
                            <Collapsible.Content>
                                <Sidebar.MenuSub class="w-full">
                                        {#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
                                            <Sidebar.MenuSubItem>
                                                <Sidebar.MenuSubButton>
                                                    {#snippet child({ props })}
                                                        <a
                                                            href={`/library/${libraryState.activeLibrary!.id}/view?shelves=${shelf.id}`}
                                                            {...props}
                                                        >
                                                            <Badge 
                                                            variant="outline"
                                                            class="scale-90 font-semibold bg-sidebar-primary text-sidebar-primary-foreground mr-1">
                                                                {shelf.total}
                                                            </Badge>
                                                            <span>{shelf.title}</span>
                                                            
                                                            
                                                        </a>
                                                    {/snippet}
                                                </Sidebar.MenuSubButton>
                                            </Sidebar.MenuSubItem>
                                        {/each}
                                </Sidebar.MenuSub>
                            </Collapsible.Content>
                        </Sidebar.MenuItem>
                    {/snippet}
                </Collapsible.Root>
            {:else}
                <Sidebar.MenuItem>
                    <Sidebar.MenuButton isActive={item.isActive} tooltipContent={item.title} class="h-10">
                        {#snippet child({ props })}
                            <a href={item.url} {...props}>
                                {#if item.icon}
                                    <item.icon class="scale-125" />
                                {/if}
                                <span class="text-md pl-2">{item.title}</span>
                            </a>
                        {/snippet}
                    </Sidebar.MenuButton>
                </Sidebar.MenuItem>
            {/if}
        {/each}
    </Sidebar.Menu>
</Sidebar.Group>