<template>
  <router-view />
</template>

<script>
import { useI18n } from 'vue-i18n'
import { useSettingsStore } from 'src/stores/settings.js'
import { updateLanguage } from 'src/utils/languageUtils.js'
import { useQuasar } from 'quasar'
import { watch } from 'vue'

export default {
  setup () {
    const { locale } = useI18n({ useScope: 'global' })
    const store = useSettingsStore()
    const $q = useQuasar()

    store.appVersion = parseInt(process.env.APP_VERSION.replace(/[".]/g, ''))

    // Watch for changes in the locale and update the language
    watch(() => store.locale, (newLocale) => {
      updateLanguage($q, newLocale) // Set the quasar component language
      locale.value = newLocale // Set the i18n locale
    })

    // Initial language setup
    updateLanguage($q, store.locale) // Set the initial quasar component language
    locale.value = store.locale // Set the initial i18n locale

    return {
      store,
      locale
    }
  }
}
</script>