import Localization from "expo-localization";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en_Translation from "./en-US/common.json";
import es_Translation from "./es-MX/common.json";
import fr_Translation from "./fr-CA/common.json";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  "en-US": en_Translation,
  "fr-CA": fr_Translation,
  "es-MX": es_Translation,
};

// creating a language detection plugin using expo
// http://i18next.com/docs/ownplugin/#languagedetector
const languageDetector = {
  type: "languageDetector",
  async: true, // flags below detection to be async
  detect: (callback) => {
    return Localization.getLocalizationAsync().then(({ locale }) => {
      callback(locale);
    });
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n.use(initReactI18next).init({
  lng: "en-US",
  fallbackLng: "en-US",
  resources,
  // have a common namespace used around the full app
  //   ns: ["common"],
  //   defaultNS: "common",
  //debug: true,
  // cache: {
  //   enabled: true
  // },
  interpolation: {
    escapeValue: false, // not needed for react as it does escape per default to prevent xss!
  },
});

export default i18n;