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>
    )
}