import "../../style/actions/arrow_action.css"
import Draggable from "react-draggable"

import {useRef} from "react"

export interface ArrowActionProps {
    onHeadDropped: (headBounds: DOMRect) => void
    onHeadPicked: (headBounds: DOMRect) => void,
    onHeadMoved: (headBounds: DOMRect) => void,
}

export default function ArrowAction({
                                        onHeadDropped,
                                        onHeadPicked,
                                        onHeadMoved
                                    }: ArrowActionProps) {
    const arrowHeadRef = useRef<HTMLDivElement>(null)

    return (
        <div className="arrow-action">
            <div className="arrow-action-pin"/>

            <Draggable
                nodeRef={arrowHeadRef}
                onStart={() => {
                    const headBounds =
                        arrowHeadRef.current!.getBoundingClientRect()
                    onHeadPicked(headBounds)
                }}
                onStop={() => {
                    const headBounds =
                        arrowHeadRef.current!.getBoundingClientRect()
                    onHeadDropped(headBounds)
                }}
                onDrag={() => {
                    const headBounds =
                        arrowHeadRef.current!.getBoundingClientRect()
                    onHeadMoved(headBounds)
                }}
                position={{x: 0, y: 0}}>
                <div
                    ref={arrowHeadRef}
                    className="arrow-head-pick"/>
            </Draggable>
        </div>
    )
}