<script setup lang="ts">
import { ref, computed } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { RouterView } from 'vue-router'
import { useMeta } from 'vue-meta'
import { useI18n } from 'vue-i18n'
import { hasASessionCookieDecoded } from '@/utils/auth'
import { title } from '@/utils/index'
import authConfig from './composables/auth'
const { authConf } = authConfig()
const { t } = useI18n()

let focusMap = ref<string>('focus-map')

useMeta({
  title: title(t('general.title')),
  og: {
    title: title(t('general.meta.title')),
    description: title(t('general.meta.description'))
  },
  twitter: {
    title: title(t('general.meta.title')),
    description: title(t('general.meta.description'))
  }
})

function setFocusMap(value: string) {
  focusMap.value = value
}
const isLogged = computed((): boolean => {
  const cookie = hasASessionCookieDecoded()
  return !!(cookie && cookie.account)
})
</script>

<template>
  <metainfo>
    <template v-slot:title="{ content }">{{ content }}</template>
  </metainfo>
  <Header
    :auth-enabled="
      authConf && authConf.auth && authConf.auth.enabled
        ? authConf.auth.enabled
        : true
    "
    :user-profile-url="
      authConf &&
      authConf.auth &&
      authConf.auth.user_profile &&
      authConf.auth.user_profile.url
        ? authConf.auth.user_profile.url
        : ''
    "
  />
  <RouterView @trigger="setFocusMap" :class="{ logged: isLogged }" />
  <Footer v-if="!isLogged" />
</template>
<style scoped></style>
