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

import { Header } from "./components/header/header";
import { Card } from "./components/demos/Card";
import { Main } from "./components/Main/Main";
import { PlayerComponent } from "./components/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";
import { useTranslation } from "react-i18next";
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 } = useAppSelector((state) => state.cardReducer);

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

  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">
                <Main></Main>
            </div>
          </div>
        ) : (
          <Redirect to="/" />
        )}
      </Route>
      <Route exact path="/stream/:id">
        <PlayerComponent
          closeStream={closeStream}
        ></PlayerComponent>
      </Route>
    </Switch>
  );
};

export default App;