import "./App.css";
import "styles/styles.css";

import { useEffect } from "react";
import { Redirect, Route, Switch, useHistory } from "react-router-dom";

import { useTranslation } from "react-i18next";

import { Header } from "components/shared/Header/Header";
import { Card } from "components/pages/Main/Card/Card";
import { PopupComponent } from "components/pages/ConnectPage/PopupComponent/PopupComponent";
import { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
import { PlanComponent } from "components/pages/Plan/PlanComponent";

import { useAppDispatch, useAppSelector } from "hooks/redux";
import { fetchCards } from "store/reducers/ActionCreator";
import { cardSlice } from "store/reducers/cardSlice";
import { languageSlice } from "store/reducers/languageSlice";

import { ICards } from "models/ICards";
import useQuery from "hooks/useQuery";

import cookies from "js-cookie";



const App: React.FC = () => {
  const dispatch = useAppDispatch();
  const history = useHistory();
  const { handleCurrentCard } = cardSlice.actions;
  const { handleChangeLanguage } = languageSlice.actions;

  const { cards, currentCard, error } = useAppSelector((state) => state.cardReducer);
  const { currentLang } = useAppSelector((state) => state.languageReducer);
  const query = useQuery()

  const langQuery = query.get('lang')

  const langArray = ['en', 'ru']

  const browserLanguage = window.navigator.language

  const handleBrowserLanguage = () => {
    return langArray.includes(browserLanguage)
  }

  const handleCookiesLanguage = () => {
    const language = cookies.get("i18next")
    return language
  }
  useEffect(() => {
    if (langArray.includes(langQuery as string)) {
      dispatch(handleChangeLanguage(langQuery as string));
      return
    }
    else if (handleCookiesLanguage()) {
      const languageCookies = handleCookiesLanguage()
      console.log(languageCookies)
      dispatch(handleChangeLanguage(languageCookies as string))
      return
    }
    let isSupported = handleBrowserLanguage()
    dispatch(handleChangeLanguage(isSupported ? browserLanguage : 'en'));
  }, [])





  useEffect(() => {
    if (currentLang) {
      dispatch(fetchCards(currentLang))
    }
  }, [currentLang])



  const handleCards = (card: ICards) => {
    dispatch(handleCurrentCard(card));
    history.push("/connect-page");
  };

  const { t } = useTranslation();

  return (
    <Switch>
      <Route exact path="/">
        <Header></Header>
        <div className="main">
          <h2 className="card-title">{error ? error : t("demo-title")}</h2>
          <div className="card-container">
            {cards.map((i: ICards) => (
              <Card onClick={() => handleCards(i)} key={i._id} item={i}></Card>
            ))}
          </div>
        </div>
      </Route>
      <Route path="/connect-page">
        {currentCard ? (
          <div className="background">
            <div className="popup-container">
              <div className="content__container">
                <PopupComponent></PopupComponent>
              </div>
            </div>
          </div>
        ) : (
          <Redirect to="/" />
        )}
      </Route>
      <Route exact path="/stream/:id">
        <PlayerComponent ></PlayerComponent>
      </Route>
      <Route path="/plan">
        <Header></Header>
        <div className="popup-container">
          <PlanComponent></PlanComponent>
        </div>
      </Route>
    </Switch>
  );
};

export default App;
