import { RefObject, useRef } from "react"
import "../../style/player.css"
<<<<<<< HEAD
import { BallPiece } from "./BallPiece"
=======
import {BallPiece} from "./BallPiece"
>>>>>>> 20078f8 (can put the ball on the court if we want)
import Draggable from "react-draggable"
import { PlayerPiece } from "./PlayerPiece"
import { Player } from "../../tactic/Player"
import { calculateRatio } from "../../Utils"

export interface PlayerProps {
    player: Player
    onChange: (p: Player) => void
    onRemove: () => void
    onBallDrop: (bounds: DOMRect) => void
    parentRef: RefObject<HTMLDivElement>
}

/**
 * A player that is placed on the court, which can be selected, and moved in the associated bounds
 * */
export default function CourtPlayer({
                                        player,
                                        onChange,
                                        onRemove,
                                        onBallDrop,
                                        parentRef,
                                    }: PlayerProps) {
    const pieceRef = useRef<HTMLDivElement>(null)
    const ballPiece = useRef<HTMLDivElement>(null)

    const x = player.rightRatio
    const y = player.bottomRatio
    const hasBall = player.hasBall

    return (
        <Draggable
            handle={".player-piece"}
            nodeRef={pieceRef}
            position={{ x, y }}
            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,
                })
            }}>
            <div
                ref={pieceRef}
                className={"player"}
                style={{
                    position: "absolute",
                    left: `${x * 100}%`,
                    top: `${y * 100}%`,
                }}>
                <div
                    id={player.id}
                    tabIndex={0}
                    className="player-content"
                    onKeyUp={(e) => {
                        if (e.key == "Delete") onRemove()
                    }}>
                    <div className="player-selection-tab">
<<<<<<< HEAD
                        {hasBall && (
                            <Draggable
                                nodeRef={ballPiece}
                                onStop={() =>
                                    onBallDrop(
                                        ballPiece.current!.getBoundingClientRect(),
                                    )
                                }
                                position={{ x: 0, y: 0 }}>
                                <div ref={ballPiece}>
                                    <BallPiece />
                                </div>
                            </Draggable>
                        )}
=======
                        {hasBall && (<Draggable nodeRef={ballPiece}
                                                onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}
                                                position={{x:0, y: 0}}>
                            <div ref={ballPiece}>
                                <BallPiece />
                            </div>
                        </Draggable>)}
>>>>>>> 20078f8 (can put the ball on the court if we want)
                    </div>
                    <PlayerPiece
                        team={player.team}
                        text={player.role}
                        hasBall={hasBall}
                    />
                </div>
            </div>
        </Draggable>
    )
}