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

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

export 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"
      }
    }
  ]

  export 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,
  }