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

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}
             style={{
                 backgroundImage: `url(${courtSvg})`
             }}
             onClick={(e: MouseEvent) => {
                 if (e.target != divRef.current)
                     return
                 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>
    )
}