import {useState} from "react";

export default function Tournament() {
    const [teams, setTeams] = useState(Array(14).fill({name: '', score: 0}))

    function handleChange(key, data, index) {
        setTeams((prevTeams) => {
            const tempCopy = prevTeams.slice(); // Shallow copy of the array

            // Create a new object for the specified index to ensure immutability
            const updatedObject = { ...tempCopy[index] };

            if (key === 'score') updatedObject.score = parseInt(data);
            else updatedObject.name = data;

            tempCopy[index] = updatedObject; // Replace the old object with the updated one

            return tempCopy;
        });
        console.log(teams)
    }

    return (
        <div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
            <div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
                <div className="match">
                    <Bracket value={teams[0]} onDataChange={handleChange} index={0}/>
                    <Bracket value={teams[1]} onDataChange={handleChange} index={1}/>
                </div>
                <div className="match">
                    <Bracket value={teams[2]} onDataChange={handleChange} index={2}/>
                    <Bracket value={teams[3]} onDataChange={handleChange} index={3}/>
                </div>
                <div className="match">
                    <Bracket value={teams[4]} onDataChange={handleChange} index={4}/>
                    <Bracket value={teams[5]} onDataChange={handleChange} index={5}/>
                </div>
                <div className="match">
                    <Bracket value={teams[6]} onDataChange={handleChange} index={6}/>
                    <Bracket value={teams[7]} onDataChange={handleChange} index={7}/>
                </div>
            </div>
            <div className="secondPhase"
                 style={{display: "flex", flexDirection: "column", justifyContent: "space-around"}}>
                <div className="match">
                    <Bracket value={teams[8]} onDataChange={handleChange} index={8}/>
                    <Bracket value={teams[9]} onDataChange={handleChange} index={9}/>
                </div>
                <div className="match">
                    <Bracket value={teams[10]} onDataChange={handleChange} index={10}/>
                    <Bracket value={teams[11]} onDataChange={handleChange} index={11}/>
                </div>
            </div>
            <div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
                <div className="match">
                    <Bracket value={teams[12]} onDataChange={handleChange} index={12}/>
                    <Bracket value={teams[13]} onDataChange={handleChange} index={13}/>
                </div>
            </div>
        </div>
    )
}

function Bracket({value, highlight, onDataChange, index}) {
    return <div id="bracketWrapper" style={{
        display: "flex",
        flexDirection: "row",
        padding: "10px",
        border: "1px solid black",
        width: "fit-content"
    }}>
        <div id="teamNameWrapper" style={{display: "flex", flexDirection: "column"}}>
            <label htmlFor="teamName" style={{fontSize: "8pt"}}>teamname</label>
            <input id={`teamName${index}`} type="text" onChange={(e) => onDataChange('name', e.target.value, index)}/>
        </div>
        <div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
            <label htmlFor={"score" + index} style={{fontSize: "8pt"}}>score</label>
            <input id={`score${index}`} type="number" min={0} style={{width: "35px"}} value={value.score}
                   onChange={(e) => onDataChange('score', e.target.value, index)}/>
        </div>
    </div>
}