import React, { useRef } from "react"
import Draggable from "react-draggable"
import { BallPiece } from "./BallPiece"
import { NULL_POS } from "../../geo/Pos"
import { Ball } from "../../model/tactic/CourtObjects"

export interface CourtBallProps {
    onPosValidated: (rect: DOMRect) => void
    onRemove: () => void
    ball: Ball
}

export function CourtBall({ onPosValidated, ball, onRemove }: CourtBallProps) {
    const pieceRef = useRef<HTMLDivElement>(null)

    const x = ball.rightRatio
    const y = ball.bottomRatio

    return (
        <Draggable
            onStop={() =>
                onPosValidated(pieceRef.current!.getBoundingClientRect())
            }
            position={NULL_POS}
            nodeRef={pieceRef}>
            <div
                className={"ball-div"}
                ref={pieceRef}
                tabIndex={0}
                onKeyUp={(e) => {
                    if (e.key == "Delete") onRemove()
                }}
                style={{
                    position: "absolute",
                    left: `${x * 100}%`,
                    top: `${y * 100}%`,
                }}>
                <BallPiece />
            </div>
        </Draggable>
    )
}