import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { EDGE_COLORS, EDGE_CONSTANTS, EDGE_DASHARRAY, EDGE_PATH_TRANSITION } from "../constants.js";
const { INTERACTION_STROKE_WIDTH, STROKE_WIDTH, SELECTED_STROKE_WIDTH, SELECTED_OUTLINE_STROKE_WIDTH, SELECTED_OUTLINE_OPACITY } = EDGE_CONSTANTS;
function EdgePath(props) {
    const { d, color, selected, animated, strokeStyle, isReadOnly, pathRef, id, style, opacity = 1 } = props;
    const dasharray = animated ? void 0 : 'dashed' === strokeStyle ? EDGE_DASHARRAY.dashed : EDGE_DASHARRAY.solid;
    const strokeWidth = style?.strokeWidth ?? (selected ? SELECTED_STROKE_WIDTH : STROKE_WIDTH);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx("path", {
                className: "react-flow__edge-interaction",
                d: d,
                fill: "none",
                stroke: "transparent",
                strokeWidth: INTERACTION_STROKE_WIDTH,
                style: {
                    pointerEvents: 'stroke',
                    cursor: isReadOnly ? 'default' : 'pointer'
                }
            }),
            selected && /*#__PURE__*/ jsx("path", {
                className: "react-flow__edge-outline",
                d: d,
                fill: "none",
                stroke: EDGE_COLORS.selected,
                strokeWidth: SELECTED_OUTLINE_STROKE_WIDTH,
                opacity: SELECTED_OUTLINE_OPACITY,
                style: {
                    pointerEvents: 'none',
                    transition: 'opacity 0.2s ease'
                }
            }),
            /*#__PURE__*/ jsx("path", {
                id: id,
                ref: pathRef,
                className: "react-flow__edge-path",
                d: d,
                fill: "none",
                strokeWidth: strokeWidth,
                style: {
                    stroke: color,
                    strokeDasharray: dasharray,
                    opacity,
                    transition: EDGE_PATH_TRANSITION
                }
            })
        ]
    });
}
export { EdgePath };
