import { Action } from "../../tactic/Action"
import BendableArrow from "../../components/arrows/BendableArrow"
import { RefObject } from "react"

export interface CourtActionProps {
    action: Action
    onActionChanges: (a: Action) => void
    courtRef: RefObject<HTMLElement>
}

export function CourtAction({
    action,
    onActionChanges,
    courtRef,
}: CourtActionProps) {
    return (
        <BendableArrow
            area={courtRef}
            startPos={action.moveFrom}
            segments={action.segments}
            onSegmentsChanges={(edges) => {
                onActionChanges({ ...action, segments: edges })
            }}
            //TODO place those magic values in constants
            endRadius={action.toPlayerId ? 26 : 17}
            startRadius={26}
        />
    )
}