<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();
const session = useAuthSession();

async function selectWarren(id: string) {
    store.setCurrentWarren(id, '/');
    await navigateTo({
        path: '/warrens/files',
    });
}
</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, id) in store.warrens"
                                        :key="id"
                                        @click="() => selectWarren(id)"
                                    >
                                        <SidebarMenuSubButton
                                            :tooltip="warren.name"
                                            :is-active="
                                                route.path.startsWith(
                                                    '/warrens/files'
                                                ) &&
                                                store.current != null &&
                                                store.current.warrenId === id
                                            "
                                            class="cursor-pointer transition-all select-none"
                                        >
                                            <Icon name="lucide:folder-root" />
                                            <span>{{ warren.name }}</span>
                                        </SidebarMenuSubButton>
                                    </SidebarMenuSubItem>
                                </SidebarMenuSub>
                            </CollapsibleContent>
                        </SidebarMenuItem>
                    </Collapsible>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
            <SidebarAdminMenu v-if="session != null && session.user.admin" />
            <SidebarUser v-if="session != null" :user="session.user" />
        </SidebarFooter>
    </Sidebar>
</template>
