<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import type { NavigationMenuItem } from '@nuxt/ui'
import { useFavoritesStore } from '~/stores/favorites'

const open = ref(false)

// Activa los atajos de teclado g-a / g-c / g-f.
useDashboard()

const favorites = useFavoritesStore()
const { total: favTotal } = storeToRefs(favorites)

const links = computed<NavigationMenuItem[][]>(() => [[{
  label: 'Actividades',
  icon: 'i-lucide-calendar-days',
  to: '/actividades',
  onSelect: () => { open.value = false }
}, {
  label: 'Conferencias',
  icon: 'i-lucide-mic',
  to: '/conferencias',
  onSelect: () => { open.value = false }
}, {
  label: 'Mi lista',
  icon: 'i-lucide-bookmark',
  to: '/favoritos',
  badge: favTotal.value > 0 ? String(favTotal.value) : undefined,
  onSelect: () => { open.value = false }
}]])
</script>

<template>
  <UDashboardGroup unit="rem">
    <UDashboardSidebar
      id="default"
      v-model:open="open"
      collapsible
      resizable
      class="bg-elevated/25"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <ULink v-if="!collapsed" as="button" class="font-semibold">La Gran Carpa Catedral</ULink>
      </template>

      <template #default="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="links[0]"
          orientation="vertical"
          tooltip
          popover
        />
      </template>

      <template #footer="{ collapsed }">
        <UserMenu :collapsed="collapsed" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>
