import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Xarrow from "@appglue/xarrow/lib";
import { ObserveMultiState } from "../../CommonUI/StateManagement/ObserveMultiState";
import { CloseSmallIcon } from "../../CommonUI/Icon/CloseSmallIcon";
import { CandidateSequence } from "../Structure/CandidateSequence";
import styled from "styled-components";
import { FlowStepSequence } from "../Structure/FlowStepSequence";
export const ConnectionLine = (props) => {
    const { line } = props;
    return (_jsx(ObserveMultiState, { listenTo: [line.value.fromSequence, line.value.fromInstruction, line.value.fromStep, line.targetSequence], control: () => {
            let targetSequence = line.targetSequence;
            return (_jsx(Xarrow, Object.assign({ "data-testid": `${line.value.fromStep._id}-${line.value.fromInstruction.pathName}`, _debug: false, divContainerStyle: { zIndex: 2 } }, line.arrow, { labels: {
                    [props.editContext.displayBehavior.lineLabelPosition]: (_jsx(ArrowLabelsWrapper, { children: line.labels.map((l, idx) => {
                            let value = l.value;
                            return (_jsxs(ArrowLabelWrapper, { children: [_jsx(ArrowLabel, Object.assign({ "data-testid": `path_${value.fromStep._id}-${value.fromInstruction.pathName}`, onClick: (event) => props.editContext.displayBehavior.onSelectStepStrategyConnect(event.currentTarget, value.fromStep), isFlowConnection: l.isFlowConnection }, { children: l.label }), void 0),
                                    targetSequence && targetSequence instanceof FlowStepSequence && (_jsx("div", Object.assign({ className: "close-connection-div", "data-testid": `${value.fromStep._id}-${value.fromInstruction.pathName}_close-connection`, onClick: () => {
                                            let newCandidate = new CandidateSequence(value.fromInstruction);
                                            value.fromInstruction.connectedSequenceId =
                                                newCandidate._id;
                                            props.editContext
                                                .getCandidateSequences()
                                                .push(newCandidate);
                                            props.editContext.onDeleteConnection();
                                        } }, { children: _jsx(CloseSmallIcon, {}, void 0) }), void 0))] }, idx));
                        }) }, void 0)),
                } }), void 0));
        } }, void 0));
};
export const ArrowLabelsWrapper = styled.div `
    display: flex;
    flex-direction: column;
`;
export const ArrowLabelWrapper = styled.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%;
        }
    }
`;
export const ArrowLabel = styled.div `
    padding: 2px 8px;
    font-size: 10px;
    font-family: Inter;
    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