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 cookies from "js-cookie";


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 { 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";

const App: React.FC = () => {

  const dispatch = useAppDispatch();
  const history = useHistory();
  const { handleCurrentCard } = cardSlice.actions;
  const { handleChangeLanguage } = languageSlice.actions;
  const { cards, currentCard } = useAppSelector((state) => state.cardReducer);

  useEffect(() => {
    dispatch(fetchCards());
    dispatch(handleChangeLanguage(cookies.get("i18next")));
  }, []);

  useEffect(() => {
    window.screen.orientation.lock("landscape");
  }, []);
  const handleCards = (card: ICards) => {
    dispatch(handleCurrentCard(card));
    history.push("/connect-page");
  };

  const closeStream = () => {
    history.push("/");
  };

  const { t } = useTranslation();

  return (
    <Switch>
      <Route exact path="/">
        <Header></Header>
        <div className="main">
          <h3 className="card-title">{t("demo-title")}</h3>
          <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">
            <Header></Header>
            <div className="content__container">
              <PopupComponent></PopupComponent>
            </div>
          </div>
        ) : (
          <Redirect to="/" />
        )}
      </Route>
      <Route exact path="/stream/:id">
        <PlayerComponent closeStream={closeStream}></PlayerComponent>
      </Route>
    </Switch>
  );
};

export default App;