import { Message, Provider as TranslationProvider, withTranslations } from 'retranslate';

import SomeComponent from './someComponent';
import { getLanguage } from './config'; // some functionality to select a language, in this example, hopefully returning en or et.
import { version } from '../../package.json';

// You can import these from a json file that tools like crowdin can use, like
// import enTranslations from './translations.en.json';
// import etTranslations from './translations.et.json';
const translations = {
  en: {
    'main.heading': 'retranslate #{{ versionNumber }}',
    'main.subtitle': 'Real simple translations for react.',
    'current.language': 'Your current language is {{ currentLanguage }}',
  },
  et: {
    'main.heading': 'retranslate #{{ versionNumber }}',
    'main.subtitle': 'Väga lihtsad tõlked reactile.',
    'current.language': 'Teie hetke keel on {{ language }}',
  },
};

// You can use the withTranslations higher-order component to get a hold of the current language and the translate function.
const LanguageShower = withTranslations(({ translations: { translate, language } }) => (
  <p>{translate('current.language', { currentLanguage: language })}</p>
));

const App = () => (
  <TranslationProvider messages={translations} language={getLanguage()} fallbackLanguage="en">
    <h1><Message params={{ versionNumber: version }}>main.heading</Message></h1>
    <SomeComponent /> // this can also use the Message component, since there is a Provider up the tree.
    <Message className="lead">main.subtitle</Message>
    <LanguageShower />
  </TranslationProvider>
);