import * as i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import * as XHR from 'i18next-xhr-backend';
import Backend from 'i18next-chained-backend';
import LocalStorageBackend from 'i18next-localstorage-backend'; // primary use cache
import { reactI18nextModule } from 'react-i18next';

const lang = localStorage.getItem('localesLang');

const appIntl: i18n.i18n = i18n.createInstance({
  fallbackLng: 'en',
  lng: lang,
  load: 'languageOnly',
  whitelist: ['en', 'ru'],
  debug: process.env.NODE_ENV === 'development',
  ns: 'common',
  defaultNS: 'common',
  backend: {
    backends: [
      LocalStorageBackend,  // primary
      XHR                   // fallback
    ],
    backendOptions: [{
      // prefix for stored languages
      prefix: 'i18next_res_',

      // expiration
      expirationTime: 7 * 24 * 60 * 60 * 1000,

      // language versions
      versions: {
        en: '1.1',
        ru: '1.1'
      }
    }, {
      loadPath: '/locales/{{lng}}/{{ns}}.json' // xhr load path for my own fallback
    }]
  },
  interpolation: {
    escapeValue: false
  },
  react: {
    wait: true
  }
});

appIntl
  .use(Backend)
  // .use(LanguageDetector)
  .use(reactI18nextModule)
  .init();

const t: i18n.TranslationFunction = appIntl.t.bind(appIntl);

export { t };

export default appIntl;