import { nextTick } from "vue";
import { useI18n, createI18n } from "vue-i18n";
import browser from "@/utils/browser";

export { useI18n, i18n };
export const SUPPORT_LOCALES = ["zh", "en", "ja"];
let i18n;
export function getLocale() {
  let lang = browser.getURLParam("lang");
  if (!lang) {
    lang = window.navigator.language || window.navigator.userLanguage || null;
    if (lang && !/^zh/.test(lang)) {
      console.log("自动获取浏览器语言:" + lang);
      lang = "en";
    } else {
      lang = "zh";
    }
  }
  document.documentElement.setAttribute("lang", lang);
  return lang;
}

export function setupI18n(options = { locale: "zh" }) {
  i18n = createI18n(options);
  setI18nLanguage(i18n, options.locale);
  return i18n;
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === "legacy") {
    i18n.global.locale = locale;
  } else {
    i18n.global.locale.value = locale;
  }
  /**
   * NOTE:
   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
   * The following is an example for axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector("html").setAttribute("lang", locale);
}

export async function loadLocaleMessages(i18n, locale) {
  // load locale messages with dynamic import
  // set locale and locale message
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `../locales/${locale}.json`
  );
  i18n.global.setLocaleMessage(locale, messages.default);
  return nextTick();
}

export default setupI18n({
  globalInjection: true,
  legacy: false,
  locale: "",
  fallbackLocale: "zh",
});