<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 warrens = [
    {
        title: 'Thyr',
        url: '/warrens/Thyr',
        icon: h(Icon, { name: 'lucide:folder-root' }),
    },
    {
        title: 'Serc',
        url: '/warrens/Serc',
        icon: h(Icon, { name: 'lucide:folder-root' }),
    },
];
</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 in warrens"
                                        :key="warren.title"
                                    >
                                        <SidebarMenuSubButton
                                            as-child
                                            :tooltip="warren.title"
                                            :is-active="
                                                warren.url === route.path
                                            "
                                            class="transition-all"
                                        >
                                            <NuxtLink :to="warren.url">
                                                <component
                                                    :is="warren.icon"
                                                ></component>
                                                <span>{{ warren.title }}</span>
                                            </NuxtLink>
                                        </SidebarMenuSubButton>
                                    </SidebarMenuSubItem>
                                </SidebarMenuSub>
                            </CollapsibleContent>
                        </SidebarMenuItem>
                    </Collapsible>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
            <SidebarUser />
        </SidebarFooter>
    </Sidebar>
</template>
