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>
    )
}
