import React, { useState, useEffect } from 'react';
import './App.css';
import Repository from './Repository'
import LanguageSwitcher from './components/LanguageSwitcher';
import Loading from './components/Loading';

function App() {
  const [dataCache, setDataCache] = useState();
  const [loading, setLoading] = useState(true);
  const [locale, setLocale] = useState('en');
  const [localeData, setLocaleData] = useState();

  useEffect(() => {
    const setDefaultLocale = () => {
      const lang = navigator.language || navigator.userLanguage;

      if (lang.toLowerCase().match('ru') === null) {
        setLocale('en');
      } else {
        setLocale('ru');
      }
    };

    setDefaultLocale();

    const fetchData = async () => {
      setDataCache(await Repository.getStaticData());
      setLoading(false);
    };

    fetchData();
  }, []);

  useEffect(() => {
    if (dataCache) setLocaleData(dataCache[locale]);
  }, [dataCache]);

  useEffect(() => {
    if (!loading) { setLocaleData(dataCache[locale]); }
  }, [locale])

  return loading ? <Loading /> : (
    <div className="App">
      <div className="wrapper">
        <div className="content container">
          <LanguageSwitcher langCaption = {localeData.header.langCaption} setLocale = {setLocale} />
        </div>
      </div>
    </div>
  );
}

export default App;