"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderSequenceStrategy = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ArrowDownIcon_1 = require("../../../CommonUI/Icon/ArrowDownIcon");
const CloseRedIcon_1 = require("../../../CommonUI/Icon/CloseRedIcon");
const ErrorIcon_1 = require("../../../CommonUI/Icon/ErrorIcon");
const BaseSequenceStrategy_1 = require("../BaseSequenceStrategy");
const FlowSequenceCompleteStrategy_1 = require("@appglue/common/dist/Flow/Structure/FlowSequenceCompleteStrategy");
const UIStyleConstants_1 = require("@appglue/common/src/Common/UIStyleConstants");
const FlowEndDiv = styled_components_1.default.div `
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
`;
const FlowEndLabelDiv = styled_components_1.default.div `
    background: #fff;
    border: 1px solid #f1f1f6;

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

    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;

    color: #4050a6;
    cursor: pointer;

    display: flex;
    align-items: center;

    padding: 3px 0;
    position: relative;

    transition: border 0.1s ease-in-out;
    justify-content: center;

    width: 79px;

    &:hover {
        border: 1px solid #4050a6;
    }

    > img {
        margin-right: 3px;
    }
`;
const FlowEndInErrorDiv = styled_components_1.default.div `
    background: #fff;
    border: 1px solid #f1f1f6;

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

    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;

    color: ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
    cursor: pointer;

    display: flex;
    align-items: center;

    padding: 3px 0;

    transition: border 0.1s ease-in-out;
    justify-content: center;

    width: 116px;

    &:hover {
        border: 1px solid ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
    }

    > img {
        margin-right: 3px;
    }
`;
const ErrorMesssgeIconButton = styled_components_1.default.div `
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    &:hover {
        border: 1px solid ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
    }
`;
const FlowEndLineDiv = styled_components_1.default.div `
    width: 1px;
    height: 8px;
    background: #4050a6;
    border-radius: 1px;
    margin: 4px 0;
`;
class RenderSequenceStrategy extends BaseSequenceStrategy_1.BaseSequenceStrategy {
    render() {
        const { sequence } = this.props;
        if (!sequence.isNormal)
            return null;
        switch (sequence.strategy) {
            case FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.RETURN_TO_CALLING_STEP:
                return ((0, jsx_runtime_1.jsxs)(FlowEndDiv, { id: sequence.endStep.getOutcomeInstructions()[0]?.getElementId(), children: [(0, jsx_runtime_1.jsx)(FlowEndLineDiv, {}), (0, jsx_runtime_1.jsx)(FlowEndLabelDiv, { onClick: this.showStrategyDialog, "data-testid": `${sequence._id}_end_flow`, children: "Edit" })] }));
            case FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW:
                return ((0, jsx_runtime_1.jsxs)(FlowEndDiv, { id: sequence.endStep.getOutcomeInstructions()[0]?.getElementId(), children: [(0, jsx_runtime_1.jsx)(FlowEndLineDiv, {}), (0, jsx_runtime_1.jsxs)(FlowEndLabelDiv, { onClick: this.showStrategyDialog, "data-testid": `${sequence._id}_end_flow`, children: [(0, jsx_runtime_1.jsx)(ArrowDownIcon_1.ArrowDownIcon, {}), "End flow"] })] }));
            case FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW_IN_ERROR:
                return ((0, jsx_runtime_1.jsxs)(FlowEndDiv, { id: sequence.endStep.getOutcomeInstructions()[0]?.getElementId(), children: [(0, jsx_runtime_1.jsx)(FlowEndLineDiv, {}), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)(FlowEndInErrorDiv, { onClick: this.showStrategyDialog, "data-testid": `${sequence._id}_error_flow`, children: [(0, jsx_runtime_1.jsx)(CloseRedIcon_1.CloseRedIcon, {}), "End flow in error"] }), (0, jsx_runtime_1.jsx)(ErrorMesssgeIconButton, { onClick: this.showErrorMessageForSequenceStrategy, "data-testid": `${sequence._id}_error_flow_set_message`, children: (0, jsx_runtime_1.jsx)(ErrorIcon_1.ErrorIcon, {}) })] })] }));
            default:
                return null;
        }
    }
}
exports.RenderSequenceStrategy = RenderSequenceStrategy;
//# sourceMappingURL=RenderSequenceStrategy.js.map