import { jsx, jsxs } from "react/jsx-runtime";
import { memo, useState } from "react";
import { EDGE_COLORS } from "../constants.js";
const WaypointHandle_WaypointHandle = /*#__PURE__*/ memo(function({ waypoint, index, forceVisible, handlers }) {
    const [isHovered, setIsHovered] = useState(false);
    const visible = forceVisible || isHovered;
    return /*#__PURE__*/ jsxs("g", {
        className: "nopan",
        transform: `translate(${waypoint.x}, ${waypoint.y})`,
        onMouseEnter: ()=>setIsHovered(true),
        onMouseLeave: ()=>setIsHovered(false),
        onMouseDown: (e)=>handlers.onMouseDown(index, e),
        onDoubleClick: (e)=>{
            e.stopPropagation();
            e.preventDefault();
            handlers.onDoubleClick(index);
        },
        style: {
            cursor: 'move'
        },
        children: [
            /*#__PURE__*/ jsx("circle", {
                r: 16,
                fill: "transparent",
                style: {
                    pointerEvents: 'all'
                }
            }),
            visible && /*#__PURE__*/ jsx("circle", {
                r: 6,
                fill: EDGE_COLORS.selected,
                stroke: "white",
                strokeWidth: 2,
                style: {
                    pointerEvents: 'none'
                }
            })
        ]
    });
});
export { WaypointHandle_WaypointHandle as WaypointHandle };
