import CourtSvg from '../../assets/basketball_court.svg';
import '../../style/basket_court.css';
import React, {MouseEvent, ReactElement, useEffect, 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) => {
                    const bounds = divRef.current!.getBoundingClientRect();

                    if (players.length >= TEAM_MAX_PLAYER) {
                        return;
                    }

                    // find a valid number for the player to place.
                    let playerIndex = players.findIndex((v, i) =>
                        v.key !== i.toString()
                    );

                    if (playerIndex == -1) {
                        playerIndex = players.length;
                    }

                    const player = (
                        <Player key={playerIndex}
                                id={playerIndex + 1}
                                x={e.clientX - bounds.x}
                                y={e.clientY - bounds.y}
                                bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
                                onRemove={() => {
                                    setPlayers(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)
                                    })
                                }}
                        />
                    );
                    setPlayers(players => players.toSpliced(playerIndex, 0, player))
                }}/>
            {players}
        </div>
    )
}