import {ReactNode, RefObject, useRef} from "react"
import "../../style/player.css"
import Draggable from "react-draggable"
import {PlayerPiece} from "./PlayerPiece"
import {Player} from "../../tactic/Player"
import {calculateRatio} from "../../Utils"

export interface PlayerProps<A extends ReactNode> {
    player: Player
    onDrag: () => void,
    onChange: (p: Player) => void
    onRemove: () => void
    parentRef: RefObject<HTMLDivElement>
    availableActions: (ro: RefObject<HTMLDivElement>) => A[]
}

/**
 * A player that is placed on the court, which can be selected, and moved in the associated bounds
 * */
export default function CourtPlayer<A extends ReactNode>({
    player,
    onDrag,
    onChange,
    onRemove,
    parentRef,
    availableActions,
}: PlayerProps<A>) {
    const x = player.rightRatio
    const y = player.bottomRatio
    const hasBall = player.hasBall

    const pieceRef = useRef<HTMLDivElement>(null);

    return (
        <Draggable
            handle=".player-piece"
            nodeRef={pieceRef}
            position={{ x, y }}
            onDrag={onDrag}
            onStop={() => {
                const pieceBounds = pieceRef.current!.getBoundingClientRect()
                const parentBounds = parentRef.current!.getBoundingClientRect()

                const { x, y } = calculateRatio(pieceBounds, parentBounds)

                onChange({
                    id: player.id,
                    rightRatio: x,
                    bottomRatio: y,
                    team: player.team,
                    role: player.role,
                    hasBall: player.hasBall,
                } as Player)
            }}>
            <div
                id={player.id}
                ref={pieceRef}
                className="player"
                style={{
                    position: "absolute",
                    left: `${x * 100}%`,
                    top: `${y * 100}%`,
                }}>
                <div tabIndex={0} className="player-content"
                     onKeyUp={(e) => {
                          if (e.key == "Delete") onRemove()
                     }}>
                    <div className="player-actions">{availableActions(pieceRef)}</div>
                    <PlayerPiece team={player.team} text={player.role} hasBall={hasBall} />
                </div>
            </div>
        </Draggable>
    )
}