import type { AvailableLanguages } from "@/stores/user";
import i18next from "i18next";
import Backend from "i18next-locize-backend";
import { locizePlugin } from "locize";

import { nextTick } from "vue";

declare module "i18next" {
  interface CustomTypeOptions {
    returnNull: false;
  }
}

export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"];

export function i18nextInit() {
  return (
    i18next
      // detect user language
      // learn more: https://github.com/i18next/i18next-browser-languageDetector
      // .use(LanguageDetector)
      // init i18next
      // for all options read: https://www.i18next.com/overview/configuration-options
      .use(Backend)
      .use(locizePlugin)
      .init({
        debug: true,
        supportedLngs: SUPPORT_LOCALES,
        fallbackLng: "de",
        defaultNS: "translation",
        returnNull: false,
        saveMissing: import.meta.env.DEV,
        backend: {
          projectId:
            import.meta.env.VITE_LOCIZE_PROJECTID ||
            "7518c269-cbf7-4d25-bc5c-6ceba2a8b74b",
          apiKey: import.meta.env.DEV ? import.meta.env.VITE_LOCIZE_API_KEY : undefined,
          fallbackLng: "de",
          allowedAddOrUpdateHosts: ["localhost", "127.0.0.1"],
        },
      })
  );
}

export function setI18nLanguage(locale: string) {
  /**
   * 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
   */
  i18next.changeLanguage(locale);
  document.querySelector("html")?.setAttribute("lang", locale);
}

export async function loadI18nextLocaleMessages(locale: any) {
  // load locale messages with dynamic import
  // unused with locize
  const messages = await import(`./locales/${locale}.json`);

  i18next.addResourceBundle(locale, "messages", messages, true, true);

  return nextTick();
}