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}: { players: Player[] }) {
    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}
                             x={(bounds.width * player.right_percentage)}
                             y={(bounds.height * player.bottom_percentage)}
                             bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
                             onRemove={() => {
                                 // setCourtPlayers(players => {
                                 //     // recompute the player's index as it may have been moved if
                                 //     // previous players were removed and added.
                                 //     const playerCurrentIndex = players.findIndex(p => p.key === playerIndex.toString())
                                 //     return players.toSpliced(playerCurrentIndex, 1)
                                 // })
                             }}
                />
            )
        }))
    }, [players, divRef]);

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