import Vue from 'vue'
import VueI18n from 'vue-i18n'
import * as en from 'locales/en.json'
import axios from 'axios'
// import * as fr from 'locales/fr.json'

Vue.use(VueI18n)

const messages = {
  en: {
    ...en.default
  }
}

export const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

const loadedLanguages = ['en'] // our default language that is preloaded

function setI18nLanguage (lang) {
  i18n.locale = lang
  // axios.defaults.headers.common['Accept-Language'] = lang
  // document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync (lang) {
  // If the same language
  if (i18n.locale === lang) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language was already loaded
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language hasn't been loaded yet
  // return import(/* webpackChunkName: "lang-[request]" */ `sites/default/files/lang/${lang}.json`).then(
  return axios.get(`/sites/default/files/lang/${lang}.json`)
    .then(({ data }) => {
      console.log(`webpack import ${lang} messages`, data)
      i18n.setLocaleMessage(lang, data)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    })
}