import React, { Component, Suspense, useEffect, useState } from 'react';

import { useTranslation, withTranslation, Trans } from 'react-i18next';

import logo from './logo.svg';

import './App.css';

// use hoc for class based components

class LegacyWelcomeClass extends Component {

render() {

const { t } = this.props;

return <h2>{t('title')}</h2>;

}

}

const Welcome = withTranslation()(LegacyWelcomeClass);

// Component using the Trans component

function MyComponent() {

return (

<Trans i18nKey="description.part1">

To get started, edit <code>src/App.js</code> and save to reload.

</Trans>

);

}

// page uses the hook

function Page() {

const { t, i18n } = useTranslation();

const [lngs, setLngs] = useState({ en: { nativeName: 'English' }});

useEffect(() => {

i18n.services.backendConnector.backend.getLanguages((err, ret) => {

if (err) return // TODO: handle err...

setLngs(ret);

});

}, []);

return (

<div className="App">

<div className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<Welcome />

</div>

<div className="App-intro">

<div>

{Object.keys(lngs).map((lng) => (

<button key={lng} style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }} type="submit" onClick={() => i18n.changeLanguage(lng)}>

{lngs[lng].nativeName}

</button>

))}

</div>

<MyComponent />

</div>

<div>{t('description.part2')}</div>

{/* <div>{t('new.key', 'this will be added automatically')}</div> */}

</div>

);

}

// loading component for suspence fallback

const Loader = () => (

<div className="App">

<img src={logo} className="App-logo" alt="logo" />

<div>loading...</div>

</div>

);

// here app catches the suspense from page in case translations are not yet loaded

export default function App() {

return (

<Suspense fallback={<Loader />}>

<Page />

</Suspense>

);

}