"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ArrowLabel = exports.ArrowLabelWrapper = exports.ArrowLabelsWrapper = exports.ConnectionLine = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ObserveMultiState_1 = require("../../../CommonUI/StateManagement/ObserveMultiState");
const CloseSmallIcon_1 = require("../../../CommonUI/Icon/CloseSmallIcon");
const CandidateSequence_1 = require("@appglue/common/dist/Flow/Structure/CandidateSequence");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const react_xarrows_1 = tslib_1.__importDefault(require("react-xarrows"));
const FlowUtilities_1 = require("@appglue/common/dist/Flow/Utilities/FlowUtilities");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const FlowTestingContext_1 = require("@appglue/common/dist/Flow/Structure/FlowTestingContext");
const ConnectionLine = (props) => {
    const { line } = props;
    return ((0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [line.value.fromSequence, line.value.fromInstruction, line.value.fromStep, line.targetSequence], control: () => {
            let targetSequence = line.targetSequence;
            return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                    let myContext = testcontext
                        ? testcontext.findItem(FlowTestingContext_1.FlowBranchTestData.getLineId(props.line.value.fromId, props.line.value.toId, props.line.value.fromInstruction.pathName))
                        : undefined;
                    return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { "data-testid": `${line.value.fromStep._id}-${line.value.fromInstruction.pathName}`, lineColor: myContext ? UIStyleConstants_1.UIStyleConstants.GREEN_COLOR : undefined, _debug: false, divContainerStyle: { zIndex: 2 }, ...line.arrow, labels: line.labels.length > 0
                            ? {
                                ["middle"]: ((0, jsx_runtime_1.jsx)(exports.ArrowLabelsWrapper, { children: line.labels.map((l, idx) => {
                                        let value = l.value;
                                        return ((0, jsx_runtime_1.jsxs)(exports.ArrowLabelWrapper, { children: [(0, jsx_runtime_1.jsx)(exports.ArrowLabel, { "data-testid": `path_${value.fromStep._id}-${value.fromInstruction.pathName}`, onClick: (event) => {
                                                        let hidden = FlowUtilities_1.FlowUtilities.IsEndStep(value.fromStep);
                                                        if (!hidden) {
                                                            // for step strategy
                                                            props.editContext.setSelectedStepStrategy(event.currentTarget, value.fromStep);
                                                        }
                                                        else if (value.fromStep.sequence) {
                                                            // for sequence strategy
                                                            props.editContext.setSelectedSequenceStrategy(event.currentTarget, value.fromStep.sequence);
                                                        }
                                                    }, isFlowConnection: l.isFlowConnection, children: l.label }), targetSequence &&
                                                    targetSequence instanceof
                                                        FlowStepSequence_1.FlowStepSequence && ((0, jsx_runtime_1.jsx)("div", { className: "close-connection-div", "data-testid": `${value.fromStep._id}-${value.fromInstruction.pathName}_close-connection`, onClick: () => {
                                                        let newCandidate = new CandidateSequence_1.CandidateSequence(value.fromInstruction);
                                                        value.fromInstruction.connectedSequenceId =
                                                            newCandidate._id;
                                                        props.editContext
                                                            .getCandidateSequences()
                                                            .push(newCandidate);
                                                        StateManager_1.StateManager.propertyChanged(targetSequence, FlowStepSequence_1.FlowStepSequence.CONNECTION_CHANGED);
                                                    }, children: (0, jsx_runtime_1.jsx)(CloseSmallIcon_1.CloseSmallIcon, {}) }))] }, idx));
                                    }) })),
                            }
                            : undefined }));
                } }));
        } }));
};
exports.ConnectionLine = ConnectionLine;
exports.ArrowLabelsWrapper = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
`;
exports.ArrowLabelWrapper = styled_components_1.default.div `
    position: relative;

    margin-top: 5px;

    &:first-child {
        margin-top: 0;
    }

    &:hover .close-connection-div {
        opacity: 1;
    }

    .close-connection-div {
        position: absolute;
        left: 100%;
        top: 50%;

        transform: translateY(-50%);
        height: 16px;
        width: 16px;

        background: #fff;
        opacity: 0;
        margin-left: 5px;
        border: 1px solid #f1f1f6;
        box-sizing: border-box;

        box-shadow: 0px 2px 4px -2px rgba(39, 41, 50, 0.04);
        border-radius: 4px;

        cursor: pointer;

        img {
            width: 100%;
        }
    }
`;
exports.ArrowLabel = styled_components_1.default.div `
    padding: 2px 8px;
    font-size: 10px;

    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.1s ease-in-out;

    ${(props) => !props.isFlowConnection
    ? `
        background: #9CA4D0;
        color: #fff;
        border-radius: 2px;
        line-height: 120%;

        &:hover {
            background: #4050A6;
        }
    `
    : `
        border: 1px solid #F1F1F6;
        box-sizing: border-box;
        color: #272932;
        background: #fff;
        line-height: 140%;
        display: flex;
        align-items: center;
        
        box-shadow: 0px 2px 4px -2px rgba(39, 41, 50, 0.04);
        border-radius: 27px;

        &:hover {
            border: 1px solid #272932;
            box-sizing: border-box;
            /* sh 4 2 4 */

            box-shadow: 0px 2px 4px -2px rgba(39, 41, 50, 0.04);
            border-radius: 11px;
        }
    `}
`;
//# sourceMappingURL=ConnectionLine.js.map