"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlowEditorExtraConnections = exports.ExtraConnection = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_xarrows_1 = tslib_1.__importDefault(require("react-xarrows"));
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const FlowEditContext_1 = require("../../FlowEditContext");
const FlowStepOutputInstructions_1 = require("@appglue/common/dist/Flow/Structure/FlowStepOutputInstructions");
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const ExtraConnection = (props) => {
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.connection.fromInstruction, properties: [FlowStepSequence_1.FlowStepSequence.STRATEGY], control: () => {
            return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { start: props.connection.fromId, end: props.connection.toId, startAnchor: [
                    {
                        position: "bottom",
                        offset: {
                            x: 5,
                        },
                    },
                ], endAnchor: "top", strokeWidth: 2, headSize: 3, color: props.connection.fromInstruction.strategy === FlowStepOutputInstructions_1.FlowStepOutputInstructionType.END_FLOW
                    ? FlowConstants_1.FlowConstants.END_LINE_COLOR
                    : FlowConstants_1.FlowConstants.ERROR_LINE_COLOR, _debug: false, divContainerStyle: { zIndex: 3 }, path: "smooth" }, props.connection.fromId));
        } }));
};
exports.ExtraConnection = ExtraConnection;
const FlowEditorExtraConnections = (props) => {
    const renderEndLines = () => ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.flow.endSequence, properties: [FlowStepSequence_1.FlowStepSequence.IS_COLLAPSED], control: () => {
            return props.editContext
                .getEndFlowConnections()
                .map((c) => ((0, jsx_runtime_1.jsx)(exports.ExtraConnection, { connection: c, editContext: props.editContext }, c.fromId)));
        } }));
    const renderErrorLines = () => ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.flow.endSequence, properties: [FlowStepSequence_1.FlowStepSequence.IS_COLLAPSED], control: () => {
            return props.editContext
                .getErrorFlowConnections()
                .map((c) => ((0, jsx_runtime_1.jsx)(exports.ExtraConnection, { connection: c, editContext: props.editContext }, c.fromId)));
        } }));
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.SHOW_ERROR_OR_END_CONNECTIONS, FlowEditContext_1.FlowEditContext.IS_SHOW_ERROR_BRANCH], control: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderEndLines(), renderErrorLines()] })) }));
};
exports.FlowEditorExtraConnections = FlowEditorExtraConnections;
//# sourceMappingURL=XFlowEditor.ExtraConnection.js.map