import React, {useState} from "react";
import StartButton from "./StartButton";
import QuitButton from "./QuitButton";
import TeamSizePopUp from "./TeamsizePopUp";
import {getReset, getScoreboard} from "./api";

function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, setScoreBlue, setScoreGreen, setScoreRed,
                 setAns1, setAns2, setAns3, setQuestion}) {
    const [gameStarted, setGameStarted] = useState(false)
    const [openPopUp, setOpenPopUp] = useState(false)
    const [quitvisible, setQuitvisible] = useState(false)

    const changeGame = (bool) => {
        setGameStarted(bool)
        setQuitvisible(bool)
    }

    const startClicked = () => {
        if(!timerRunning && !gameStarted) {
            setOpenPopUp(true);
        }
        else if (!timerRunning && gameStarted) {
            startQuestion();
        }
    }

    const  quitGame = () => {
        changeGame(false);
        stopTimer();
        setQuestionCount(0);
        getReset(setAns1, setAns2, setAns3, setQuestion);
        alert("Spiel abgebrochen !");
        getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
    }


    return(
        <div className="Buttons">
            <StartButton
                onClick={startClicked}
                content={(gameStarted) ? "Nächste Frage" : "Spiel Starten" }
            />
            {quitvisible && <QuitButton quitGame={quitGame}/>}
            {openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}
                                         changeGameState={changeGame}
                                         startQuestion={startQuestion}
                                         setTeamSize={setTeamSize}
            />}
        </div>
    )
}

export default Buttons