<script setup lang="ts">
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuAction } from '@/components/ui/crm-sidebar';
import { urlIsActive } from '@/lib/utils';
import { type NavGroup } from '@/types';
import { Link, usePage } from '@inertiajs/vue3';
import { LayoutGrid } from 'lucide-vue-next';
import { dashboard } from '@/routes';
import SidebarSeparator from './ui/crm-sidebar/SidebarSeparator.vue';

defineProps<{
    groups: NavGroup[];
}>();

const page = usePage();
</script>


<template>
    <SidebarGroup class="px-2 py-0 mt-[1.8rem]">

        <SidebarMenuItem :key="'dashboard'">
            <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'" class="text-base">
                <Link prefetch :href="dashboard()">
                    <LayoutGrid class="text-muted-foreground" :class="urlIsActive(dashboard(), page.url) ? 'text-primary' : 'text-sidebar-icon'" />
                    <span>Dashboard</span>
                </Link>
            </SidebarMenuButton>
        </SidebarMenuItem>
    </SidebarGroup>

    <!-- Groups -->
    <SidebarGroup class="px-2 py-0" v-for="group in groups">
        <SidebarSeparator
        class="absolute mt-6 shrink transition-opacity opacity-0 group-data-[collapsible=icon]:opacity-100 w-4 bg-muted-foreground/50"
        style="width: calc(var(--spacing) * 4);" />
        
        <!-- Group title -->
        <SidebarGroupLabel class="font-medium text-sm text-muted-foreground mt-2 group-data-[collapsible=icon]:mt-2">
            {{ group.title }}
        </SidebarGroupLabel>
        
        <!-- Group menu -->
        <SidebarMenu class="font-medium text-base gap-2">
            <SidebarMenuItem v-for="item in group.items" :key="item.title">
                <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title" class="text-base font-normal">
                    <Link prefetch :href="item.href">
                        <component :is="item.icon" 
                            :class="urlIsActive(item.href, page.url) ? 'text-primary' : 'text-sidebar-icon'" />
                        <span>{{ item.title }}</span>
                    </Link>
                </SidebarMenuButton>
                <SidebarMenuAction v-if="item.action">
                    <Link prefetch :href="item.action.href">
                        <component :is="item.action.icon" class="text-sidebar-icon" size="0.833rem" />
                        <span class="sr-only">{{ item.action.title }}</span>
                    </Link>
                </SidebarMenuAction>
            </SidebarMenuItem>
        </SidebarMenu>

    </SidebarGroup>

</template>
