import { Action, MovementActionKind } from "../../tactic/Action"
import Xarrow, { Xwrapper } from "react-xarrows"
import { xarrowPropsType } from "react-xarrows/lib/types"


export function renderAction(action: Action) {

    const from = action.moveFrom;
    const to = action.moveTo;

    let arrowStyle: xarrowPropsType = {start: from, end: to, color: "var(--arrows-color)"}

    switch (action.type) {
        case MovementActionKind.DRIBBLE:
            arrowStyle.dashness = {
                animation: true,
                strokeLen: 5,
                nonStrokeLen: 5
            }
            break
        case MovementActionKind.SCREEN:
            arrowStyle.headShape = "circle"
            arrowStyle.headSize = 2.5
            break
        case MovementActionKind.MOVE:
    }



    return (
        <Xwrapper key={`${action.type}-${from}-${to}`}>
            <Xarrow {...arrowStyle}/>
        </Xwrapper>
    )
}