"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatRight = exports.ActionButtons = exports.IfIndentedSection = exports.IfSection = exports.IfThenExpressionEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const material_1 = require("@mui/material");
const ExpressionRuleEditor_1 = require("../ExpressionRuleEditor");
const IfThenExpression_1 = require("@appglue/common/dist/Expressions/Expressions/Logic/IfThenExpression");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const ExpressionStyles_1 = require("../../Builder/ExpressionStyles");
const ExpressionReactContext_1 = require("../../Structure/ExpressionReactContext");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const ExpressionTestResultColorContext_1 = require("../../Testing/ExpressionTestResultColorContext");
const ExpressionValueRenderer_1 = require("../../Builder/ExpressionValueRenderer");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const InlineTextEdit_1 = require("../../../CommonUI/InlineTextEdit");
const PlusIcon_1 = require("../../../CommonUI/Icon/PlusIcon");
const DeleteIcon_1 = require("../../../CommonUI/Icon/DeleteIcon");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const RegisterExpressionRuleEditor_1 = require("../../Utilities/RegisterExpressionRuleEditor");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const LeftAlignIcon_1 = require("../../../CommonUI/Icon/LeftAlignIcon");
const ActiveLeftAlignIcon_1 = require("../../../CommonUI/Icon/ActiveLeftAlignIcon");
const RightAlignIcon_1 = require("../../../CommonUI/Icon/RightAlignIcon");
const ActiveRightAlignIcon_1 = require("../../../CommonUI/Icon/ActiveRightAlignIcon");
const LogicalIcon_1 = require("../../../CommonUI/Icon/LogicalIcon");
const ActiveLogicalIcon_1 = require("../../../CommonUI/Icon/ActiveLogicalIcon");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
class IfThenExpressionEditor extends ExpressionRuleEditor_1.ExpressionRuleEditor {
    renderEnd() {
        if (this.ruleData.ifThenStyle === IfThenExpression_1.IfThenStyle.LOGICAL_RETURN && this.ruleData.showSimpleReturn) {
            return ((0, jsx_runtime_1.jsxs)(exports.IfSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: this.renderThen() }), (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Consumer, { children: (context) => ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsxs)(exports.IfIndentedSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { color: this.getLogicDataTestColor(testcontext, "true"), children: (0, jsx_runtime_1.jsx)(ResultSection, { bracketcolor: this.getLogicDataTestColor(testcontext, "true"), renderType: context.renderType, children: "\u00A0\u00A0return true\u00A0\u00A0" }) }), (0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: "else" }), (0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { color: this.getLogicDataTestColor(testcontext, "false"), children: (0, jsx_runtime_1.jsx)(ResultSection, { bracketcolor: this.getLogicDataTestColor(testcontext, "false"), renderType: context.renderType, children: "\u00A0\u00A0return false\u00A0\u00A0" }) })] })) })) })] }));
        }
        if (this.ruleData.ifThenStyle === IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN) {
            if (this.ruleData.showElseAsDefault) {
                return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getTestValueColor(this.ruleData.defaultOutput, testcontext), children: (0, jsx_runtime_1.jsxs)(exports.IfSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, {}), (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: [this.ruleData.defaultText, " =", " ", (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.defaultOutput })] })] }) })) }));
            }
            else {
                return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getTestValueColor(this.ruleData.defaultOutput, testcontext), children: (0, jsx_runtime_1.jsxs)(exports.IfSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: "else" }), (0, jsx_runtime_1.jsxs)(exports.IfIndentedSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: this.renderThen() }), (0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.defaultOutput }) })] })] }) })) }));
            }
        }
        if (this.ruleData.ifThenStyle === IfThenExpression_1.IfThenStyle.DATA_RETURN) {
            return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Consumer, { children: (context) => ((0, jsx_runtime_1.jsx)(exports.IfSection, { children: (0, jsx_runtime_1.jsxs)(exports.IfIndentedSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: this.renderThen() }), (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["\u00A0\u00A0", (0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getTestValueColor(this.ruleData.trueOutput, testcontext), children: (0, jsx_runtime_1.jsxs)(ResultSection, { bracketcolor: this.getTestValueColor(this.ruleData.trueOutput, testcontext), renderType: context.renderType, children: ["\u00A0\u00A0", (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.trueOutput })] }) })] }), (0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: "else" }), (0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getTestValueColor(this.ruleData.defaultOutput, testcontext), children: (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["\u00A0\u00A0", (0, jsx_runtime_1.jsx)(ResultSection, { bracketcolor: this.getTestValueColor(this.ruleData.defaultOutput, testcontext), renderType: context.renderType, children: (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.defaultOutput }) })] }) })] }) })) })) }));
        }
        return (0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, {});
    }
    renderThen() {
        return ((0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Consumer, { children: (context) => ((0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: this.ruleData.thenText, onEdit: (newVal) => {
                    this.ruleData.thenText = newVal;
                    this.ruleData.expressionContext?.refresh();
                }, readOnly: context.renderType === ExpressionReactContext_1.ExpressionRenderType.COMPACT ||
                    context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT })) }));
    }
    renderBranchActions(index, renderRuleChange = false) {
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                if (testcontext)
                    return null;
                let isLast = index + 1 === this.ruleData._ifBranches.length;
                if (isLast) {
                    if (index === 0) {
                        if (renderRuleChange) {
                            return ((0, jsx_runtime_1.jsxs)(exports.FloatRight, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: this.addIfBranchFromAction, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, {}) }), "\u00A0", this.renderRuleChange()] }));
                        }
                        else {
                            return ((0, jsx_runtime_1.jsx)(exports.ActionButtons, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: this.addIfBranchFromAction, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, {}) }) }));
                        }
                    }
                    else {
                        return ((0, jsx_runtime_1.jsxs)(exports.ActionButtons, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", "aria-label": "delete", onClick: (event) => {
                                        event.stopPropagation();
                                        this.deleteIfBranchFromAction(index);
                                    }, children: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: this.addIfBranchFromAction, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, {}) })] }));
                    }
                }
                else if (index !== 0) {
                    return ((0, jsx_runtime_1.jsx)(exports.ActionButtons, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", "aria-label": "delete", onClick: (event) => {
                                event.stopPropagation();
                                this.deleteIfBranchFromAction(index);
                            }, children: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}) }) }));
                }
                else if (renderRuleChange) {
                    return (0, jsx_runtime_1.jsx)(exports.FloatRight, { children: this.renderRuleChange() });
                }
            } }));
    }
    getTestValueColor(el, testcontext) {
        if (!testcontext)
            return undefined;
        if (!testcontext)
            return undefined;
        let testitem = testcontext.findItem(el._id);
        if (testitem) {
            return TestingConstants_1.TestingConstants.TEXT_SUCCESS;
        }
        return undefined;
    }
    getLogicDataTestColor(testcontext, val) {
        if (!testcontext)
            return undefined;
        if (!testcontext)
            return undefined;
        let testitem = testcontext.findItem(this.ruleData._id);
        if (testitem?.result === val)
            return UIStyleConstants_1.UIStyleConstants.GREEN_COLOR;
        if (testitem?.result !== val)
            return UIStyleConstants_1.UIStyleConstants.RED_COLOR;
        return undefined;
    }
    checkPairPassedInTest(pairId, testcontext) {
        if (!testcontext)
            return null;
        let testitem = testcontext.findItem(pairId);
        if (!testitem)
            return null;
        if (testitem.result === "true")
            return true;
        if (testitem.result === "false")
            return false;
        return null;
    }
    getPairTestValueColor(pairId, testcontext) {
        let result = this.checkPairPassedInTest(pairId, testcontext);
        if (result === null)
            return undefined;
        let color = result ? TestingConstants_1.TestingConstants.TEXT_SUCCESS : TestingConstants_1.TestingConstants.TEXT_FAIL;
        return color;
    }
    renderPairTestResult(pairId, testcontext) {
        let result = this.checkPairPassedInTest(pairId, testcontext);
        let color = result ? TestingConstants_1.TestingConstants.TEXT_SUCCESS : TestingConstants_1.TestingConstants.TEXT_FAIL;
        if (result === null)
            return null;
        return (0, jsx_runtime_1.jsx)(TestValueRender, { color: color, children: result.toString() });
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.ruleData, control: () => ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsxs)(AllIfDiv, { children: [this.ruleData._ifBranches.map((value, index) => {
                            if (this.ruleData.ifThenStyle === IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN) {
                                if (index === 0) {
                                    return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getPairTestValueColor(value._id, testcontext), children: (0, jsx_runtime_1.jsxs)(exports.IfSection, { children: [(0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["if ", (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(value.ifExpression), this.renderPairTestResult(value._id, testcontext), (0, jsx_runtime_1.jsx)(exports.FloatRight, { children: this.renderRuleChange() })] }), (0, jsx_runtime_1.jsxs)(exports.IfIndentedSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: this.renderThen() }), (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["\u00A0\u00A0", (0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: undefined, children: (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: value.thenExpression }) }), this.renderBranchActions(index)] })] })] }, value._id) }, value._id));
                                }
                                else {
                                    return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getPairTestValueColor(value._id, testcontext), children: (0, jsx_runtime_1.jsxs)(exports.IfSection, { children: [(0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["else if ", (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(value.ifExpression), this.renderBranchActions(index), this.renderPairTestResult(value._id, testcontext)] }), (0, jsx_runtime_1.jsxs)(exports.IfIndentedSection, { children: [(0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionLineDiv, { children: this.renderThen() }), (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["\u00A0\u00A0", (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: value.thenExpression })] })] })] }, value._id) }, value._id));
                                }
                            }
                            else {
                                if (index === 0) {
                                    return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getPairTestValueColor(value._id, testcontext), children: (0, jsx_runtime_1.jsx)(exports.IfSection, { children: (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["if ", (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(value.ifExpression), this.renderPairTestResult(value._id, testcontext), this.renderBranchActions(index, true)] }) }, value._id) }, value._id));
                                }
                                else {
                                    return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getPairTestValueColor(value._id, testcontext), children: (0, jsx_runtime_1.jsx)(exports.IfSection, { children: (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: ["else if ", (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(value.ifExpression), this.renderBranchActions(index), this.renderPairTestResult(value._id, testcontext)] }) }, value._id) }, value._id));
                                }
                            }
                        }), this.renderEnd()] })) })) }));
    }
    addIfBranchFromAction(event) {
        event.stopPropagation();
        this.ruleData.addIfBranch();
    }
    deleteIfBranchFromAction(index) {
        if (this.ruleData.ifBranches.length === 1)
            return null;
        this.ruleData.deleteIfBranch(index);
    }
    renderRuleChange() {
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                if (testcontext)
                    return null;
                if (this.ruleData.expressionValueType.type !== DataTypes_1.DataTypes.BOOLEAN) {
                    return ((0, jsx_runtime_1.jsxs)(ExpressionStyles_1.RuleChangeToggleButtonGroup, { value: this.ruleData.ifThenStyle, exclusive: true, onChange: this.changeStyle, "aria-label": "rule style", size: "small", children: [(0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: IfThenExpression_1.IfThenStyle.DATA_RETURN, "aria-label": IfThenExpression_1.IfThenStyle.DATA_RETURN, children: this.ruleData.ifThenStyle !== IfThenExpression_1.IfThenStyle.DATA_RETURN ? ((0, jsx_runtime_1.jsx)(LeftAlignIcon_1.LeftAlignIcon, { alt: IfThenExpression_1.IfThenStyle.DATA_RETURN })) : ((0, jsx_runtime_1.jsx)(ActiveLeftAlignIcon_1.ActiveLeftAlignIcon, { alt: IfThenExpression_1.IfThenStyle.DATA_RETURN })) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN, "aria-label": "Branch Data Return", children: this.ruleData.ifThenStyle !== IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN ? ((0, jsx_runtime_1.jsx)(RightAlignIcon_1.RightAlignIcon, { alt: IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN })) : ((0, jsx_runtime_1.jsx)(ActiveRightAlignIcon_1.ActiveRightAlignIcon, { alt: IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN })) })] }));
                }
                else {
                    return ((0, jsx_runtime_1.jsxs)(ExpressionStyles_1.RuleChangeToggleButtonGroup, { value: this.ruleData.ifThenStyle, exclusive: true, onChange: this.changeStyle, "aria-label": "rule style", size: "small", children: [(0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: IfThenExpression_1.IfThenStyle.DATA_RETURN, "aria-label": IfThenExpression_1.IfThenStyle.DATA_RETURN, children: this.ruleData.ifThenStyle !== IfThenExpression_1.IfThenStyle.DATA_RETURN ? ((0, jsx_runtime_1.jsx)(LeftAlignIcon_1.LeftAlignIcon, { alt: IfThenExpression_1.IfThenStyle.DATA_RETURN })) : ((0, jsx_runtime_1.jsx)(ActiveLeftAlignIcon_1.ActiveLeftAlignIcon, { alt: IfThenExpression_1.IfThenStyle.DATA_RETURN })) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN, "aria-label": "Branch Data Return", children: this.ruleData.ifThenStyle !== IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN ? ((0, jsx_runtime_1.jsx)(RightAlignIcon_1.RightAlignIcon, { alt: "Branch Data Return" })) : ((0, jsx_runtime_1.jsx)(ActiveRightAlignIcon_1.ActiveRightAlignIcon, { alt: "Branch Data Return" })) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: IfThenExpression_1.IfThenStyle.LOGICAL_RETURN, "aria-label": "Logical Return", children: this.ruleData.ifThenStyle !== IfThenExpression_1.IfThenStyle.LOGICAL_RETURN ? ((0, jsx_runtime_1.jsx)(LogicalIcon_1.LogicalIcon, { alt: "Logical Return" })) : ((0, jsx_runtime_1.jsx)(ActiveLogicalIcon_1.ActiveLogicalIcon, { alt: "Logical Return" })) })] }));
                }
            } }));
    }
    changeStyle(event, value) {
        event.stopPropagation();
        this.ruleData.ifThenStyle = value;
        StateManager_1.StateManager.changed(this);
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "renderEnd", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "renderThen", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "renderBranchActions", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "addIfBranchFromAction", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "deleteIfBranchFromAction", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "renderRuleChange", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], IfThenExpressionEditor.prototype, "changeStyle", null);
exports.IfThenExpressionEditor = IfThenExpressionEditor;
const AllIfDiv = styled_components_1.default.div `
    font-size: 18px;
    width: 100%;
`;
const StyledIfSection = styled_components_1.default.div `
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            position: relative;
            margin: 2px 0;
            padding-left: 8px;

            &::before {
                content: '';
                width: 4px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                border: 1px solid ${props.bracketcolor || "#93A9BF"};
                border-right: none;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
        
            &::after {
                content: '';
                width: 4px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                border: 1px solid ${props.bracketcolor || "#93A9BF"};
                border-left: none;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        `
    : ``}
`;
const IfSection = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    const colorcontext = react_1.default.useContext(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext);
    return (0, jsx_runtime_1.jsx)(StyledIfSection, { ...props, renderType: context.renderType, bracketcolor: colorcontext });
};
exports.IfSection = IfSection;
const StyledIfIndentedSection = styled_components_1.default.div `
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    margin-left: 15px;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            padding-left: 13px;
            margin-right: 15px;
            margin-top: 5px;
            margin-bottom: 10px;
            position: relative;
        
            &::before {
                content: '';
                width: 4px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                border: 1px solid #93A9BF;
                border-right: none;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
        
            &::after {
                content: '';
                width: 4px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                border: 1px solid #93A9BF;
                border-left: none;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        `
    : ``}
`;
const IfIndentedSection = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledIfIndentedSection, { ...props, renderType: context.renderType });
};
exports.IfIndentedSection = IfIndentedSection;
const StyledActionButtons = styled_components_1.default.div `
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                    display: flex;
                    margin-left: auto;
                    justify-content: flex-end;
                    padding-right: 15px;
                    align-items: center;
                `
    : `display: none;`}
`;
const ActionButtons = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledActionButtons, { ...props, renderType: context.renderType });
};
exports.ActionButtons = ActionButtons;
const StyledFloatRight = styled_components_1.default.div `
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                display: flex;
                margin-left: auto;
                justify-content: flex-end;
                padding-right: 15px;
                padding-top: 5px;
                padding-bottom: 5px;
                align-items: center;
                align-self: self-start;
            `
    : `
                display: none;
            `}
`;
const FloatRight = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledFloatRight, { ...props, renderType: context.renderType });
};
exports.FloatRight = FloatRight;
const TestValueRender = styled_components_1.default.div `
    font-size: 12px;
    position: absolute;

    right: 10px;
    bottom: -16px;

    ${(props) => (props.color ? `color: ${props.color};` : ``)}
`;
const ResultSection = styled_components_1.default.div `
    display: inline-flex;
    position: relative;
    padding: 5px 10px;
    text-align: center;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                &::before {
                    content: "";
                    width: 4px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    border: 1px solid ${props.bracketcolor || "#93A9BF"};
                    border-right: none;
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }
            
                &::after {
                    content: "";
                    width: 4px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border: 1px solid ${props.bracketcolor || "#93A9BF"};
                    border-left: none;
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
            `
    : `
        `}
`;
//# sourceMappingURL=IfThenExpressionEditor.js.map