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

const { locale, locales, setLocale } = useI18n()

const { $i18n } = useNuxtApp();
const t = $i18n.t;

const open = ref(false)

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

const history = useHistoryStore()
const { total: histTotal } = storeToRefs(history)


const links = computed(() => {
  return [
    {
      label: $i18n.t('nav.bible_studies'),
      icon: 'ph:books',
      to: '/actividades',
      locale: locale.value,
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.conferences'),
      icon: 'ph:books',
      to: '/conferencias',
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.bible_studies_ts'),
      icon: 'ph:books',
      to: '/estudios-typensense',
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.conferences_ts'),
      icon: 'ph:books',
      to: '/conferencias-typensense',
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.between_the_lines'),
      icon: 'ph:list-magnifying-glass',
      to: '/entrelineas',
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.my_list'),
      icon: 'i-lucide-bookmark',
      to: '/favoritos',
      badge: favTotal.value > 0 ? String(favTotal.value) : undefined,
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.history'),
      icon: 'i-lucide-history',
      to: '/historial',
      badge: histTotal.value > 0 ? String(histTotal.value) : undefined,
      onSelect: () => { open.value = false }
    },
    {
      label: t('nav.settings'),
      icon: 'i-lucide-settings',
      to: '/configuracion',
      onSelect: () => { open.value = false }
    }
  ] satisfies NavigationMenuItem[]
})

</script>

<template>
  
  <UDashboardGroup unit="rem">
    
    <UDashboardSidebar
      id="default"
      v-model:open="open"
      collapsible
      resizable
      class="bg-elevated/25 bg-gradient-to-tr from-blue-100 to-white"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <div v-if="!collapsed" class="mt-2 flex justify-center">
          <img src="/logo.svg" class="w-full" alt="Buscador - La Gran Carpa Catedral" />
        </div>
      </template>

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

      <template #footer="{ collapsed }">
        <ULocaleSelect
          :model-value="$i18n.locale.value"
          :locales="Object.values(locales)"
          @update:model-value="setLocale($event)"
        />
      </template>
    </UDashboardSidebar>

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