import { Action, ActionKind } from "../../model/tactic/Action"
import BendableArrow from "../../components/arrows/BendableArrow"
import { RefObject } from "react"
import { MoveToHead, ScreenHead } from "../../components/actions/ArrowAction"
import { ComponentId } from "../../model/tactic/Tactic"
import { middlePos, Pos, ratioWithinBase } from "../../geo/Pos"

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

export function CourtAction({
    origin,
    action,
    onActionChanges,
    onActionDeleted,
    courtRef,
}: CourtActionProps) {
    let head
    switch (action.type) {
        case ActionKind.DRIBBLE:
        case ActionKind.MOVE:
        case ActionKind.SHOOT:
            head = () => <MoveToHead />
            break
        case ActionKind.SCREEN:
            head = () => <ScreenHead />
            break
    }

    let dashArray
    switch (action.type) {
        case ActionKind.SHOOT:
            dashArray = "10 5"
            break
    }

    return (
        <BendableArrow
            forceStraight={action.type == ActionKind.SHOOT}
            area={courtRef}
            startPos={origin}
            segments={action.segments}
            onSegmentsChanges={(edges) => {
                onActionChanges({ ...action, segments: edges })
            }}
            wavy={action.type == ActionKind.DRIBBLE}
            //TODO place those magic values in constants
            endRadius={action.target ? 26 : 17}
            startRadius={10}
            onDeleteRequested={onActionDeleted}
            style={{
                head,
                dashArray,
            }}
        />
    )
}