<script setup lang="ts">
const nuxtApp = useNuxtApp();
const { $i18n } = useNuxtApp();
const t = $i18n.t;

const title = t('seo.title')
const description = t('seo.description')

useHead({
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' }
  ],
  htmlAttrs: {
    lang: $i18n.locale
  }
})

useSeoMeta({
  title,
  description,
  ogTitle: title,
  ogDescription: description
})

const steps = [
  {
    element: "#bible-studies",
    popover: {
      title: t('nav.bible_studies'),
      description: t('tour.bible_studies_description'),
      side: "right",
    },
  },
  {
    element: "#conferences",
    popover: {
      title: t('nav.conferences'),
      description: t('tour.conferences_description'),
      side: "right",
    },
  },
  {
    element: "#betweenthelines",
    popover: {
      title: t('nav.between_the_lines'),
      description: t('tour.betweenthelines_description'),
      side: "right",
    },
  },
  {
    element: "#favorites",
    popover: {
      title: t('nav.my_list'),
      description: t('tour.favorites_description'),
      side: "right",
    },
  },
  {
    element: "#history",
    popover: {
      title: t('nav.history'),
      description: t('tour.history_description'),
      side: "right",
    },
  },
  {
    element: "#changelog",
    popover: {
      title: t('nav.changelog'),
      description: t('tour.changelog_description'),
      side: "right",
    },
  },
  {
    element: "#settings",
    popover: {
      title: t('nav.settings'),
      description: t('tour.settings_description'),
      side: "right",
    },
  },
  {
    element: "#feedback",
    popover: {
      title: t('feedback.title'),
      description: t('tour.feedback_description'),
      side: "right",
    },
  },
  {
    element: "#localeSelector",
    popover: {
      title: t('nav.localeselector'),
      description: t('tour.localeselector_description'),
      side: "right",
    },
  },
  {
    element: ".collapse-sidebar-icon",
    popover: {
      title: t('search.collapse'),
      description: t('tour.collapse_sidebar_description'),
      side: "bottom"
    }
  },
  {
    element: ".total-results",
    popover: {
      title: t('search.total_results'),
      description: t('tour.total_results_description'),
      side: "bottom"
    }
  },
  {
    element: "#index_changelog",
    popover: {
      title: t('nav.changelog'),
      description: t('tour.changelog_description'),
      side: "right",
    },
  },
  {
    element: ".favorites_toggle",
    popover: {
      title: t('tour.favorites_button'),
      description: t('tour.favorites_toggle'),
      side: "bottom"
    }
  }
]

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

nuxtApp.hook('tour', (startIndex=0)=>{
  const { driver } = useDriver("onboarding");
  const instance = driver( tourConfig )
  instance.drive(startIndex)
  
})
</script>

<template>
  <UApp>
    <NuxtLoadingIndicator />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>
