<script setup lang="ts">
import { Icon } from '#components';
import {
    SidebarGroup,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import {
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
} from '@/components/ui/collapsible';

const route = useRoute();

const store = useWarrenStore();
</script>

<template>
    <Sidebar collapsible="icon">
        <SidebarContent>
            <SidebarGroup>
                <SidebarMenu>
                    <Collapsible class="group/collapsible" :default-open="true">
                        <SidebarMenuItem>
                            <NuxtLink to="/warrens" as-child>
                                <SidebarMenuButton
                                    tooltip="Your Warrens"
                                    :is-active="route.path === '/warrens'"
                                >
                                    <Icon name="lucide:folder-tree" />
                                    <span>Your Warrens</span>
                                    <CollapsibleTrigger
                                        as-child
                                        @click="preventDefault"
                                    >
                                        <Icon
                                            name="lucide:chevron-right"
                                            class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                                        />
                                    </CollapsibleTrigger>
                                </SidebarMenuButton>
                            </NuxtLink>

                            <CollapsibleContent>
                                <SidebarMenuSub>
                                    <SidebarMenuSubItem
                                        v-for="(warren, uuid) in store.warrens"
                                        :key="uuid"
                                    >
                                        <SidebarMenuSubButton
                                            as-child
                                            :tooltip="warren.name"
                                            :is-active="
                                                route.path.startsWith(
                                                    `/warrens/${uuid}`
                                                )
                                            "
                                            class="transition-all"
                                        >
                                            <NuxtLink :to="`/warrens/${uuid}`">
                                                <Icon
                                                    name="lucide:folder-root"
                                                />
                                                <span>{{ warren.name }}</span>
                                            </NuxtLink>
                                        </SidebarMenuSubButton>
                                    </SidebarMenuSubItem>
                                </SidebarMenuSub>
                            </CollapsibleContent>
                        </SidebarMenuItem>
                    </Collapsible>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
            <SidebarUser />
        </SidebarFooter>
    </Sidebar>
</template>
