import React, {useState} from "react";
import {postTeamsize} from "./api";

function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}) {

    const [inputValue, setInputValue] = useState(2);

    const getInput = (event) => {
        setInputValue(event.target.value);
    }


    const closePopUp = () => {
        closeModal(false);
    }

    const TeamSizeButtonClicked = () => {
        if(inputValue <= 3 && inputValue > 0){
        try {
            console.log(typeof inputValue)
            postTeamsize(inputValue).then(r => { if (r.ok) {console.log("OK")} });
            setTeamSize(inputValue);
            changeGameState(true);
            closePopUp();
            startQuestion();
        } catch (error) {
            console.error(error)
        }
        }
        else {
            alert("Bitte Zahl zwischen 1 und 3 eingeben ! ")
        }

    }

    return (
        <div className="PopUpBackground">
            <div className="PopUpContainer">
                <div>
                    <div id="Cancel" onClick={closePopUp}>X</div>
                    <h2>Bitte Teamgröße wählen </h2>
                </div>
                <div>
                    <input type="number" id="TeamSizeInput" min={1} max={3} value={inputValue}
                    onChange={getInput}/>
                </div>
                <div>
                    <button className="MyButton" id="PopUpButton" onClick={TeamSizeButtonClicked}>Bestätigen und Spiel starten</button>
                </div>
            </div>
        </div>
    )

}

export default TeamSizePopUp