import "../../style/basket_court.css"
import {RefObject} from "react"
import CourtPlayer from "./CourtPlayer"

import {Player} from "../../tactic/Player"
import {CourtObject} from "../../tactic/CourtObjects";
import {CourtBall} from "./CourtBall";

export interface BasketCourtProps {
    players: Player[]
    objects: CourtObject[]

    onPlayerRemove: (p: Player) => void
    onPlayerChange: (p: Player) => void

    onBallRemove : () => void

    onBallMoved: (ball: DOMRect) => void,

    courtImage: string
    courtRef: RefObject<HTMLDivElement>
}

export function BasketCourt({
                                players,
                                objects,
                                onPlayerRemove,
                                onBallRemove,
                                onBallMoved,
                                onPlayerChange,
                                courtImage,
                                courtRef,
                            }: BasketCourtProps) {

    return (
        <div
            id="court-container"
            ref={courtRef}
            style={{position: "relative"}}>
            <img src={courtImage} alt={"court"} id="court-svg"/>
            {players.map((player) => {
                return (
                    <CourtPlayer
                        key={player.team + player.role}
                        player={player}
                        onChange={onPlayerChange}
                        onRemove={() => onPlayerRemove(player)}
                        onBallDrop={onBallMoved}
                        parentRef={courtRef}
                    />
                )
            })}

            {objects.map(object => {
                if (object.type == "ball") {
                    return <CourtBall
                        onMoved={onBallMoved}
                        ball={object}
                        onRemove={onBallRemove}
                        key="ball"
                    />
                }
                throw new Error("unknown court object", object.type)
            })}
        </div>
    )
}