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"

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

export function CourtAction({
    origin,
    action,
    onActionChanges,
    onActionDeleted,
    courtRef,
    isInvalid
}: CourtActionProps) {

    const color = isInvalid ? "red" : "black"

    let head
    switch (action.type) {
        case ActionKind.DRIBBLE:
        case ActionKind.MOVE:
        case ActionKind.SHOOT:
            head = () => <MoveToHead color={color} />
            break
        case ActionKind.SCREEN:
            head = () => <ScreenHead color={color}/>
            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,
                color
            }}
        />
    )
}