// import i18next from 'i18next';

i18next
  .use(i18nextXHRBackend)
  .use(i18nextBrowserLanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: true,
    ns: ['common', 'record'],
    defaultNS: 'common',
    backend: {
      // load from i18next-gitbook repo
      loadPath: '/i18next/samples/load-from-github/lang/{{lng}}/{{ns}}.json',
      crossDomain: false
    }
  }, function(err, t) {
    // init set content
    updateContent();
  });


// just set some content and react to language changes
// could be optimized using vue-i18next, jquery-i18next, react-i18next, ...
function updateContent() {
  document.getElementById('title').innerHTML = i18next.t('title', { what: 'apple' });
  document.getElementById('total').innerHTML = i18next.t('record:total.info', { count: 10  });
  document.getElementById('sold').innerHTML = i18next.t('record:sold.info', { count: 9  });
  document.getElementById('unsold').innerHTML = i18next.t('record:unsold.info', { count: 1 });
  document.getElementById('info').innerHTML = `detected user language: "${i18next.language}"  --> loaded languages: "${i18next.languages.join(', ')}"`;
}

function changeLng(lng) {
  i18next.changeLanguage(lng);
}

i18next.on('languageChanged', () => {
  updateContent();
});