import React, {useRef} from "react";
import Draggable from "react-draggable";
import {BallPiece, CourtBallProps} from "./BallPiece";


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

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

    return (
        <Draggable
            onStop={() => onMoved(pieceRef.current!.getBoundingClientRect())}
            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>
    )
}