import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { memo, useState } from "react";
import { EDGE_COLORS, EDGE_CONSTANTS } from "../constants.js";
import { getSegmentMidpoint } from "../geometry.js";
const { INTERACTION_STROKE_WIDTH } = EDGE_CONSTANTS;
const SEGMENT_CURSOR = {
    horizontal: 'ns-resize',
    vertical: 'ew-resize'
};
const HANDLE_RECT = {
    horizontal: {
        x: -12,
        y: -5,
        width: 24,
        height: 10
    },
    vertical: {
        x: -5,
        y: -12,
        width: 10,
        height: 24
    }
};
const SegmentDragHandle_SegmentDragHandle = /*#__PURE__*/ memo(function({ segment, segmentIndex, handlers }) {
    const [isHovered, setIsHovered] = useState(false);
    const midpoint = getSegmentMidpoint(segment);
    const cursor = SEGMENT_CURSOR[segment.orientation];
    const rect = HANDLE_RECT[segment.orientation];
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx("line", {
                className: "nopan",
                x1: segment.start.x,
                y1: segment.start.y,
                x2: segment.end.x,
                y2: segment.end.y,
                stroke: "transparent",
                strokeWidth: INTERACTION_STROKE_WIDTH,
                style: {
                    cursor,
                    pointerEvents: 'stroke'
                },
                onMouseEnter: ()=>setIsHovered(true),
                onMouseLeave: ()=>setIsHovered(false),
                onMouseDown: (e)=>handlers.onMouseDown(segment, e),
                onDoubleClick: (e)=>handlers.onDoubleClick(segmentIndex, e)
            }),
            isHovered && /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ jsx("line", {
                        x1: segment.start.x,
                        y1: segment.start.y,
                        x2: segment.end.x,
                        y2: segment.end.y,
                        stroke: EDGE_COLORS.selected,
                        strokeWidth: 4,
                        opacity: 0.4,
                        style: {
                            pointerEvents: 'none'
                        }
                    }),
                    /*#__PURE__*/ jsx("g", {
                        transform: `translate(${midpoint.x}, ${midpoint.y})`,
                        style: {
                            pointerEvents: 'none'
                        },
                        children: /*#__PURE__*/ jsx("rect", {
                            x: rect.x,
                            y: rect.y,
                            width: rect.width,
                            height: rect.height,
                            rx: 5,
                            fill: EDGE_COLORS.selected,
                            stroke: "white",
                            strokeWidth: 2
                        })
                    })
                ]
            })
        ]
    });
});
export { SegmentDragHandle_SegmentDragHandle as SegmentDragHandle };
