<script setup lang="ts">
import { setToastDefaultOptions } from 'vant'
import { useI18n } from 'vue-i18n'
import { APP_LOCALE_KEY } from '~/constants'
import { getDeviceLanguage } from '~/utils/helpers'

useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Gami` : 'Gami'
  },
  meta: [
    {
      name: 'viewport',
      content:
        'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover',
    },
  ],
})

useSeoMeta({
  ogTitle: 'Gami',
  ogDescription: 'Gami - Temukan teman bermainmu',
  ogImage: 'https://public.gami.vip/og.png',
})

const { setLocale } = useI18n()

setToastDefaultOptions({ wordBreak: 'normal', position: 'bottom' })

onMounted(() => {
  if (typeof window === 'undefined')
    return

  const savedLocale = window.localStorage.getItem(APP_LOCALE_KEY)
  if (savedLocale) {
    setLocale(savedLocale as 'en' | 'id' | 'zh')
  }
  else {
    const deviceLanguage = getDeviceLanguage()

    setLocale(deviceLanguage)
    window.localStorage.setItem(APP_LOCALE_KEY, deviceLanguage)
  }
})
</script>

<template>
  <NuxtLayout>
    <NuxtPage :keepalive="{ include: ['HomePage', 'SearchPage'] }" />
  </NuxtLayout>
</template>
