import "./index.css";
import "./App.css"
import { Route, Switch } from "react-router-dom";

import React, { useEffect, useState } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
import { Main } from "./components/main/main";
import { Header } from "./components/header/header";
import { Footer } from "./components/footer/footer";
import { Demostration } from "./components/demonstration/demonstartion";
import textRU from "./utils/textRU"
import textEN from "./utils/textEN";

export type TObjct = {
  calendar: boolean;
  timePicker: boolean;
  form: boolean;
  confirm: boolean;
};




export const App: React.FC = () => {
  const [language, setLanguage] = useState<any>("");
  const [text, setText] = useState(textRU);
  const savedLanguage = localStorage.getItem('savedLang')


  useEffect(() => {
    if (savedLanguage !== null) {
      setSavedLanguage()
    } else {
      setInitialLanguage()
    }
  }, []);

  function setSavedLanguage() {
    if (savedLanguage === 'RU') {
      setLanguage('RU')
      localStorage.setItem("lang", 'RU')
      setText(textRU)
    } else if (savedLanguage === 'EN') {
      setLanguage('EN')
      localStorage.setItem("lang", 'EN')
      setText(textEN)
    }
  }

  function setInitialLanguage() {
    if (window.navigator.language === 'ru') {
      setLanguage('RU')
      localStorage.setItem("lang", 'RU')
      setText(textRU)

    } else {
      setLanguage('EN')
      setText(textEN)
    }
  }

  function changeLanguage(language: string) {
    if (language === 'RU') {
      setLanguage(language);
      setText(textRU)
      localStorage.setItem('savedLang', 'RU');
      localStorage.setItem("lang", 'RU')
    } else {
      setLanguage('EN')
      localStorage.setItem("lang", 'EN')
      localStorage.setItem("savedLang", 'EN')
      setText(textEN)
    }
  }

  AOS.init({
    once: true,
  });
  return (
    <Switch>
      <Route path="/" exact>
        <div className='App'>
          <Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
          <Main locale={language} text={text}></Main>
          <Footer language={language} text={text.footer}></Footer>
        </div>
      </Route>
      <Route exact path="/demos">
        <div className='App'>
          <main className="main">
            <Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
            <Demostration text={text.demos}></Demostration>
          </main>
        </div>
      </Route>

    </Switch>
  );
};

export default App;