import { Action, MovementActionKind } from "../../tactic/Action"
import Xarrow, { Xwrapper } from "react-xarrows"
import { xarrowPropsType } from "react-xarrows/lib/types"
import BendableArrow from "../../components/arrows/BendableArrow"
import { middlePos, Pos } from "../../components/arrows/Pos"


export function ActionRender({basePos, action}: {basePos: Pos, action: Action}) {

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

    const fromPos = document.getElementById(from)!.getBoundingClientRect()
    const toPos = document.getElementById(to)!.getBoundingClientRect()

    return (
            <BendableArrow
                key={`${action.type}-${from}-${to}`}
                basePos={basePos}
                startPos={middlePos(fromPos)}
                endPos={middlePos(toPos)}
            />
    )
}