import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { getMemory, setMemory } from "@/utils/memory.ts";
import cn from "@/resources/i18n/cn.json";
import en from "@/resources/i18n/en.json";
import ru from "@/resources/i18n/ru.json";
import ja from "@/resources/i18n/ja.json";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)

const resources = {
  cn: { translation: cn },
  en: { translation: en },
  ru: { translation: ru },
  ja: { translation: ja },
};

export const langsProps: Record<string, string> = {
  cn: "简体中文",
  en: "English",
  ru: "Русский",
  ja: "日本語",
};

export const supportedLanguages = Object.keys(resources);
export const defaultLanguage = "cn";

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: getLanguage(),
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  })
  .then(() => console.debug(`[i18n] initialized (language: ${i18n.language})`));

export default i18n;

export function getLanguage(): string {
  const storage = getMemory("language");
  if (storage && supportedLanguages.includes(storage)) {
    return storage;
  }
  // get browser language
  const lang = navigator.language.split("-")[0];
  if (supportedLanguages.includes(lang)) {
    return lang;
  }
  return defaultLanguage;
}

export function setLanguage(i18n: any, lang: string): void {
  if (supportedLanguages.includes(lang)) {
    i18n
      .changeLanguage(lang)
      .then(() =>
        console.debug(`[i18n] language changed (language: ${i18n.language})`),
      );
    setMemory("language", lang);
    return;
  }
  console.warn(`[i18n] language ${lang} is not supported`);
}
