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

export function CourtBall({onMoved, ball}: 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}
                 style={{
                     position: "absolute",
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
                 }}
            >
                <BallPiece/>
            </div>
        </Draggable>
    )
}