import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Position } from "../../xyflow/react.js";
import { memo, useRef, useState } from "react";
import { useEdgeExecutionState, useEdgePath, useElementValidationStatus } from "../../hooks/index.js";
import { isPreviewEdge } from "../../utils/createPreviewNode.js";
import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
import { EdgeToolbar, useEdgeToolbarState } from "../Toolbar/index.js";
import { edgeTargetStatusToEdgeColor, getStatusAnimation } from "./EdgeUtils.js";
const ARROW_SIZE = 10;
const ANGLE_MAP = {
    [Position.Left]: 0,
    [Position.Right]: Math.PI,
    [Position.Top]: Math.PI / 2,
    [Position.Bottom]: -Math.PI / 2
};
const ARROW_OFFSETS = {
    [Position.Left]: {
        x: 8,
        y: 0
    },
    [Position.Right]: {
        x: -8,
        y: 0
    },
    [Position.Top]: {
        x: 0,
        y: 8
    },
    [Position.Bottom]: {
        x: 0,
        y: -8
    }
};
function areEdgePropsEqual(prevProps, nextProps) {
    if (prevProps.id !== nextProps.id) return false;
    if (prevProps.selected !== nextProps.selected) return false;
    if (prevProps.source !== nextProps.source) return false;
    if (prevProps.target !== nextProps.target) return false;
    if (prevProps.sourcePosition !== nextProps.sourcePosition) return false;
    if (prevProps.targetPosition !== nextProps.targetPosition) return false;
    if (prevProps.data !== nextProps.data) return false;
    if (prevProps.style !== nextProps.style) return false;
    const threshold = 0.5;
    if (Math.abs(prevProps.sourceX - nextProps.sourceX) > threshold) return false;
    if (Math.abs(prevProps.sourceY - nextProps.sourceY) > threshold) return false;
    if (Math.abs(prevProps.targetX - nextProps.targetX) > threshold) return false;
    if (Math.abs(prevProps.targetY - nextProps.targetY) > threshold) return false;
    return true;
}
const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, source, sourceX, sourceY, sourcePosition, sourceHandleId, target, targetX, targetY, targetPosition, targetHandleId, style, data }) {
    const [isHovered, setIsHovered] = useState(false);
    const pathElementRef = useRef(null);
    const { mode } = useBaseCanvasMode();
    const isReadOnly = 'readonly' === mode;
    const previewEdge = isPreviewEdge({
        id,
        source,
        target
    });
    const executionStatus = useEdgeExecutionState(id, target);
    const { validationStatus } = useElementValidationStatus(id) ?? {
        validationStatus: void 0
    };
    const status = executionStatus ? executionStatus?.status ?? executionStatus : validationStatus;
    const isDiffAdded = data?.isDiffAdded === true;
    const isDiffRemoved = data?.isDiffRemoved === true;
    const hideArrowHead = data?.hideArrowHead === true;
    const hideToolbar = data?.hideToolbar === true;
    const angle = ANGLE_MAP[targetPosition];
    const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
    const { edgePath, labelX, labelY } = useEdgePath({
        sourceNodeId: source,
        targetNodeId: target,
        sourceHandleId,
        targetHandleId,
        sourceX,
        sourceY,
        sourcePosition,
        targetX: hideArrowHead ? targetX + offsetX : targetX,
        targetY: hideArrowHead ? targetY + offsetY : targetY,
        targetPosition
    });
    const { showToolbar, toolbarPositioning, config: toolbarConfig, handleMouseMoveOnPath } = useEdgeToolbarState({
        edgeId: id,
        pathElementRef,
        isHovered,
        sourceHandleId,
        targetHandleId,
        sourcePosition,
        targetPosition,
        source,
        target
    });
    const getEdgeColor = ()=>{
        if (isDiffAdded) return 'var(--canvas-success-icon)';
        if (isDiffRemoved) return 'var(--canvas-error-icon)';
        if (previewEdge) return 'var(--canvas-primary)';
        if (selected) return 'var(--canvas-primary)';
        if (isHovered) return 'var(--canvas-primary-hover)';
        if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
        return 'var(--canvas-border)';
    };
    const edgeColor = getEdgeColor();
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsxs("g", {
                onMouseEnter: ()=>setIsHovered(true),
                onMouseLeave: ()=>setIsHovered(false),
                onMouseMove: handleMouseMoveOnPath,
                children: [
                    /*#__PURE__*/ jsx("path", {
                        className: "react-flow__edge-interaction",
                        d: edgePath,
                        fill: "none",
                        stroke: "transparent",
                        strokeWidth: 20,
                        style: {
                            pointerEvents: 'stroke',
                            cursor: isReadOnly ? 'default' : 'pointer'
                        }
                    }),
                    selected && /*#__PURE__*/ jsx("path", {
                        className: "react-flow__edge-outline",
                        d: edgePath,
                        fill: "none",
                        stroke: "var(--canvas-primary)",
                        strokeWidth: 10,
                        opacity: 0.3,
                        style: {
                            pointerEvents: 'none',
                            transition: 'opacity 0.2s ease'
                        }
                    }),
                    /*#__PURE__*/ jsx("path", {
                        id: id,
                        className: "react-flow__edge-path",
                        d: edgePath,
                        strokeWidth: style?.strokeWidth || 2,
                        style: {
                            stroke: edgeColor,
                            strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
                            opacity: style?.opacity !== void 0 ? style.opacity : 1,
                            transition: 'stroke 0.2s ease, opacity 0.2s ease'
                        },
                        ref: pathElementRef
                    }),
                    !hideArrowHead && /*#__PURE__*/ jsx("polygon", {
                        points: `
              ${targetX},${targetY}
              ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
              ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
            `,
                        fill: edgeColor,
                        style: {
                            pointerEvents: 'none',
                            opacity: style?.opacity !== void 0 ? style.opacity : 1,
                            transition: 'fill 0.2s ease, opacity 0.2s ease',
                            transform: `translate(${offsetX}px, ${offsetY}px)`
                        }
                    }),
                    getStatusAnimation(status, edgePath),
                    'string' == typeof data?.label && data.label.length > 0 && /*#__PURE__*/ jsx("foreignObject", {
                        x: labelX,
                        y: labelY,
                        width: 1,
                        height: 1,
                        overflow: "visible",
                        style: {
                            pointerEvents: 'none'
                        },
                        children: /*#__PURE__*/ jsx("div", {
                            className: "react-flow__edge-label nodrag nopan",
                            style: {
                                position: 'absolute',
                                transform: 'translate(-50%, -50%)',
                                whiteSpace: 'nowrap',
                                pointerEvents: 'none',
                                color: 'var(--canvas-foreground)',
                                background: 'var(--canvas-background)',
                                padding: '4px 8px',
                                borderRadius: '4px',
                                fontSize: '12px',
                                fontWeight: 500,
                                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
                                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
                            },
                            children: data.label
                        })
                    })
                ]
            }),
            !hideToolbar && showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
                edgeId: id,
                visible: showToolbar,
                positioning: toolbarPositioning,
                config: toolbarConfig,
                onMouseEnter: ()=>setIsHovered(true),
                onMouseLeave: ()=>setIsHovered(false)
            })
        ]
    });
}, areEdgePropsEqual);
export { SequenceEdge_SequenceEdge as SequenceEdge };
