import { Action, ActionKind } from "../../tactic/Action"
import BendableArrow from "../../components/arrows/BendableArrow"
import { RefObject } from "react"
import {
    MoveToHead,
    ScreenHead,
    ShootHead,
} from "../../components/actions/ArrowAction"

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

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

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

    return (
        <BendableArrow
            forceStraight={action.type == ActionKind.SHOOT}
            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={0}
            onDeleteRequested={onActionDeleted}
            style={{
                head,
                dashArray,
            }}
        />
    )
}