Untitled

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import { QuestionModalContainer } from "./components/QuestionModalContainer";
import {
  Card,
  CardCost,
  CardsContainer,
  CategoriesContainer,
  EscapeModal,
  RoundContainer,
} from "./components/styled";
import { categories } from "./data/categories";
import { players } from "./data/players";
import { PlayersContainer } from "./components/PlayersContainer";
import { getPlayers, getRoundCards, getSecondPlaceId, getWinnerId } from "./helpers/utils";
import { AnswerModalContainer } from "./components/AnswerModalContainer";
import { FinishRoundContainer } from "./components/FinishRoundContainer";
import {
  finalRoundQuestions,
  firstRoundQuestions,
  secondRoundQuestions,
} from "./data/questions";
import { ResultContainer } from "./components/ResultContainer";

const cacheWinners = localStorage.winners
  ? JSON.parse(localStorage.winners)
  : [];
const cacheRound = localStorage.round ? JSON.parse(localStorage.round) : 0;
const cachePlayers = localStorage.players
  ? JSON.parse(localStorage.players)
  : players;
const cacheCardsFirst = localStorage.firstRoundQuestions
  ? JSON.parse(localStorage.firstRoundQuestions)
  : firstRoundQuestions;
const cacheCardsSecond = localStorage.secondRoundQuestions
  ? JSON.parse(localStorage.secondRoundQuestions)
  : secondRoundQuestions;
const cacheCardsFinal = localStorage.finalRoundQuestions
  ? JSON.parse(localStorage.finalRoundQuestions)
  : finalRoundQuestions;

const App = () => {
  const [winners, setWinners] = useState(cacheWinners);
  const [round, setRound] = useState<number>(cacheRound);
  const [modalQuestionOpen, setModalQuestionOpen] = useState<boolean>(false);
  const [modalAnswerOpen, setModalAnswerOpen] = useState<boolean>(false);
  const [currentCard, setCurrentCard] = useState({});
  const [roundPlayers, editCurrentPlayers] = useState(
    getPlayers(round, cachePlayers, winners)
  );
  const [roundCards, editRoundCards] = useState(
    getRoundCards(
      round,
      cacheCardsFirst,
      cacheCardsSecond,
      cacheCardsFinal
    )
  );
  const [escModalIsOpen, setEscModalOpen] = useState<boolean>(false);
  const escFunction = (event: any) => {
    if (event.key === "Escape") {
      if (escModalIsOpen) {
        setEscModalOpen(false);
      } else {
        setEscModalOpen(true);
      }
    }
  };
  useEffect(() => {
    document.addEventListener("keydown", escFunction);

    return () => {
      document.removeEventListener("keydown", escFunction);
    };
  }, [escModalIsOpen]);

  const roundCategories = categories[round];

  const handleClick = (card: any) => {
    if (card.isDone) {
      return;
    }
    setCurrentCard(card);
    setModalQuestionOpen(true);
  };

  const saveInLocal = () => {
    localStorage.setItem(
      "firstRoundQuestions",
      JSON.stringify(cacheCardsFirst)
    );
    localStorage.setItem(
      "secondRoundQuestions",
      JSON.stringify(cacheCardsSecond)
    );
    localStorage.setItem(
      "finalRoundQuestions",
      JSON.stringify(cacheCardsFinal)
    );
    localStorage.setItem("players", JSON.stringify(cachePlayers));
    localStorage.setItem("round", JSON.stringify(round));
    localStorage.setItem("winners", JSON.stringify(winners));
  };

  const answerClick = (hasChanged?: boolean) => {
    hasChanged && saveInLocal();
    setModalAnswerOpen(!modalAnswerOpen);
  };

  const goToNextRound = () => {
    const winnerOfTheRound = getWinnerId(roundPlayers);
    const secondPlaceOfTheRound = getSecondPlaceId(roundPlayers);
    const winnersArray = round === 0 ? winners.concat(winnerOfTheRound, secondPlaceOfTheRound) : winners.concat(winnerOfTheRound);
    setWinners(winnersArray);
    const nextRound = round + 1;
    setRound(nextRound);
    editCurrentPlayers(
      getPlayers(nextRound, cachePlayers, winnersArray)
    );
    editRoundCards(
      getRoundCards(
        nextRound,
        cacheCardsFirst,
        cacheCardsSecond,
        cacheCardsFinal
      )
    );
  };

  if (
    roundCards.filter((card: any) => !card.isDone).length === 0 &&
    !modalQuestionOpen
  ) {
    return (
      <FinishRoundContainer
        players={roundPlayers}
        goToNextRound={goToNextRound}
        round={round}
      />
    );
  }

  if (
    roundCards.filter((card: any) => !card.isDone).length === 0 &&
    round === 2
  ) {
    return <ResultContainer players={cachePlayers} winners={cacheWinners}/>;
  }

  if (escModalIsOpen) {
    return (
      <EscapeModal>
        <p>Пауза</p>
      </EscapeModal>
    );
  }

  return (
    <>
      <RoundContainer>
        <CategoriesContainer>
          {roundCategories.map((category) => {
            return <Card key={category.id}>{category.name}</Card>;
          })}
        </CategoriesContainer>
        <CardsContainer>
          {roundCards.map((card: any) => {
            return (
              <Card key={card.id} onClick={() => handleClick(card)}>
                <CardCost isDone={card.isDone}>{card.cost}</CardCost>
              </Card>
            );
          })}
        </CardsContainer>
      </RoundContainer>
      <PlayersContainer players={roundPlayers} />
      {modalQuestionOpen && (
        <QuestionModalContainer
          card={currentCard}
          onOk={answerClick}
          onClose={() => setModalQuestionOpen(false)}
        />
      )}
      {modalAnswerOpen && (
        <AnswerModalContainer
          players={roundPlayers}
          onOk={editCurrentPlayers}
          onClose={answerClick}
          editCards={editRoundCards}
          currentCard={currentCard}
          cards={roundCards}
        />
      )}
    </>
  );
}

export default App;