import CourtSvg from '../../assets/basketball_court.svg';
import '../../style/basket_court.css';
import {MouseEvent, ReactElement, useEffect, useRef, useState} from "react";
import CourtPlayer from "./CourtPlayer";
import {Player} from "../../data/Player";

export function BasketCourt({players, onPlayerRemove}: { players: Player[], onPlayerRemove: (Player) => void }) {
    const [courtPlayers, setCourtPlayers] = useState<ReactElement[]>([])
    const divRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const bounds = divRef.current!.getBoundingClientRect();
        setCourtPlayers(players.map(player => {
            return (
                <CourtPlayer key={player.id}
                             pos={player.position}
                             team={player.team}
                             x={(bounds.width * player.right_percentage)}
                             y={(bounds.height * player.bottom_percentage)}
                             bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
                             onRemove={() => onPlayerRemove(player)}
                />
            )
        }))
    }, [players, divRef]);

    return (
        <div id="court-container" ref={divRef}>
            <CourtSvg id="court-svg"/>
            {courtPlayers}
        </div>
    )
}