import CourtSvg from '../../assets/basketball_court.svg';
import '../../style/basket_court.css';
import React, {MouseEvent, ReactElement, useRef, useState} from "react";
import Player from "./Player";
import Draggable from "react-draggable";

const TEAM_MAX_PLAYER = 5;

export function BasketCourt() {
    const [players, setPlayers] = useState<ReactElement[]>([])
    const divRef = useRef<HTMLDivElement>(null);

    return (
        <div id="court-container" ref={divRef}>
            <CourtSvg
                id="court-svg"
                onClick={(e: MouseEvent) => {
                    console.log(e.target)
                    let bounds = divRef.current!.getBoundingClientRect();
                    let playerCount = players.length;

                    if (playerCount >= TEAM_MAX_PLAYER) {
                        return;
                    }

                    const player = (
                        <Player key={playerCount}
                                id={playerCount + 1}
                                x={e.clientX - bounds.x}
                                y={e.clientY - bounds.y}
                                bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
                        />
                    );
                    setPlayers([...players, player])
                }}/>
            {players}
        </div>
    )
}