import { useFetchJson } from '@/composable/useFetchJson'
import { initCountryCurrency, initLangs, langs } from '@/router/langs'
import { watch } from 'vue'
import { createI18n, type PathValue } from 'vue-i18n'

// const x =
await initLangs()
await initCountryCurrency()
export const i18ninstall = createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: 'en',
  lazy: true,
  messages: {},
  messageResolver: (obj, path) => {
    const value = path
      .split('.')
      // eslint-disable-next-line
      .reduce<unknown>((o, key) => (o as any)?.[key], obj as any)

    if (value === '' || value === null || value === undefined) {
      return null
    }

    return value as PathValue
  },
})

export const i18n = i18ninstall.global

let downloadedLangs = [] as string[]

const getLangs = async (l: string) => {

  if (!downloadedLangs.includes(l)) {
    const lang = langs.find((x) => x.iso_code == l)
    if (!lang) return
    downloadedLangs.push(l)
    const res = await useFetchJson<any>(`/api/v1/translations?lang_id=${lang?.id}&scope=backoffice`)
    i18n.setLocaleMessage(l, res.items[lang.id]['backoffice'])
  }
}

getLangs(i18n.locale.value)

watch(
  i18n.locale,
  async (l) => {
    await getLangs(l)
  }
)