<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'
import { chatPalette } from '#build/ui'

const unlocked = ref(useDevMode())

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(() => {
  const links = [
    {
      id: 'bible-studies',
      label: t('nav.bible_studies'),
      icon: 'ph-books',
      to: '/estudios-biblicos',
      onSelect: () => { open.value = false },
    },
    {
      id: 'conferences',
      label: t('nav.conferences'),
      icon: 'ph-books',
      to: '/conferencias',
      onSelect: () => { open.value = false }
    },
    {
      id: 'betweenthelines',
      label: t('nav.between_the_lines'),
      icon: 'ph-list-magnifying-glass',
      to: '/entrelineas',
      onSelect: () => { open.value = false }
    },
    {
      id: 'favorites',
      label: t('nav.my_list'),
      icon: 'i-lucide-bookmark',
      to: '/favoritos',
      badge: favTotal.value > 0 ? String(favTotal.value) : undefined,
      onSelect: () => { open.value = false }
    },
    {
      id: 'history',
      label: t('nav.history'),
      icon: 'i-lucide-history',
      to: '/historial',
      badge: histTotal.value > 0 ? String(histTotal.value) : undefined,
      onSelect: () => { open.value = false }
    },
    {
      id: 'changelog',
      label: t('nav.changelog'),
      icon: 'i-lucide-megaphone',
      to: '/changelog',
      onSelect: () => { open.value = false }
    },
    {
      id: 'settings',
      label: t('nav.settings'),
      icon: 'i-lucide-settings',
      to: '/configuracion',
      onSelect: () => { open.value = false }
    },
    {
      id: 'feedback',
      label: t('feedback.title'),
      icon: 'i-lucide-bug',
      to: '/feedback',
      onSelect: () => { open.value = false }
    },
    {
      id: 'wizard',
      class: 'mt-4 border-t-2 border-gray-300 pt-4',
      label: t('nav.tour'),
      icon: 'ph-student',
      onSelect: () => start( tourConfig ),
       chip: {
        color: 'error'
      }
    }

  ] satisfies NavigationMenuItem[]
  
  const homeLink = {
      id: 'home',
      label: t('nav.tour'),
      icon: 'ph-house',
      to: '/'
    }
    
  return [ homeLink,...links]
})

const { start } = useDriver("onboarding");

const steps = [
    {
      element: "#bible-studies",
      popover: {
        title: t('nav.bible_studies'),
        description: t('nav.bible_studies_tour_description'),
        side: "right",
      },
    },
    {
      element: "#conferences",
      popover: {
        title: t('nav.conferences'),
        description: t('nav.conferences_tour_description'),
        side: "right",
      },
    },
    {
      element: "#betweenthelines",
      popover: {
        title: t('nav.between_the_lines'),
        description: t('nav.betweenthelines_tour_description'),
        side: "right",
      },
    },
    {
      element: "#favorites",
      popover: {
        title: t('nav.my_list'),
        description: t('nav.favorites_tour_description'),
        side: "right",
      },
    },
    {
      element: "#history",
      popover: {
        title: t('nav.history'),
        description: t('nav.history_tour_description'),
        side: "right",
      },
    },
    {
      element: "#changelog",
      popover: {
        title: t('nav.changelog'),
        description: t('nav.changelog_tour_description'),
        side: "right",
      },
    },
    {
      element: "#settings",
      popover: {
        title: t('nav.settings'),
        description: t('nav.settings_tour_description'),
        side: "right",
      },
    },
    {
      element: "#feedback",
      popover: {
        title: t('feedback.title'),
        description: t('nav.feedback_tour_description'),
        side: "right",
      },
    },
    {
      element: "#localeSelector",
      popover: {
        title: t('nav.localeselector'),
        description: t('nav.localeselector_tour_description'),
        side: "right",
      },
    },
    {
      element: ".collapse-sidebar-icon",
      popover: {
        title: t('search.collapse'),
        description: t('search.collapse_sidebar_tour_description'),
        side: "bottom"
      }
    },
    {
      element: ".total-results",
      popover: {
        title: t('search.total_results'),
        description: t('search.total_results_tour_description'),
        side: "bottom"
      }
    }
  ]

  const tourConfig = {
    nextBtnText: t('tour.next'),
    prevBtnText: t('tour.prev'),
    doneBtnText: t('tour.done'),
    progressText: t('tour.progress'),
    showProgress: true,
    animate: true,
    smoothScroll: true,
    steps: steps,
  }

</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>
        <img v-if="collapsed" src="/logo_round.svg" class="w-full" alt="Buscador - La Gran Carpa Catedral" />
      </template>

      <template #default="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="links"
          orientation="vertical"
          tooltip
          popover
          color="neutral"
          variant="link"
        >

          <template #item="{item}">
            <div :id="item.id" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted flex-row">
              <UChip :color="item.chip?.color" :show="item.chip?.color ? true : false" inset>
                <UIcon :name="item.icon" class="text-2xl" />
              </UChip>
              <div :class="!collapsed ? 'flex justify-between w-full' : 'hidden'" >{{ item.label }}
                <UBadge v-if="item.badge" variant="outline" color="neutral" size="sm" :label="item.badge" />
              </div>
            </div>
          </template>
        </UNavigationMenu>
      </template>

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

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