"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AndGroupEditor = exports.GroupedBracketedDiv = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const AndGroup_1 = require("@appglue/common/dist/Expressions/Expressions/Logic/AndGroup");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ExpressionTestResultColorContext_1 = require("../../Testing/ExpressionTestResultColorContext");
const ExpressionReactContext_1 = require("../../Structure/ExpressionReactContext");
const ExpressionRuleEditor_1 = require("../ExpressionRuleEditor");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const ExpressionStyles_1 = require("../../Builder/ExpressionStyles");
const PlusIcon_1 = require("../../../CommonUI/Icon/PlusIcon");
const InlineOptionSelect_1 = require("../../../CommonUI/InlineOptionSelect");
const DeleteIcon_1 = require("../../../CommonUI/Icon/DeleteIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const ExpressionValueRenderer_1 = require("../../Builder/ExpressionValueRenderer");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const StyledBracketedDiv = styled_components_1.default.div `
    position: relative;
    display: flex;
    align-items: center;

    flex-direction: ${(props) => props.direction || "row"};

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                padding: 2px 4px;
                margin-left: 6px;
                margin-right: 10px;

                ${props.hasChild
        ? `
                            flex: 1;
                        `
        : ``}

                &::before {
                    content: "";
                    width: 4px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    border: 1px solid ${props.color || "#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.color || "#93a9bf"};
                    border-left: none;
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }

            `
    : `
                padding: 0;
            `}
`;
const GroupedBracketedDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    const testcolor = react_1.default.useContext(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext);
    return ((0, jsx_runtime_1.jsx)(StyledBracketedDiv, { ...props, renderType: context.renderType, compactColor: context.color, issueType: props.issue?.level, color: testcolor }));
};
exports.GroupedBracketedDiv = GroupedBracketedDiv;
class AndGroupEditor extends ExpressionRuleEditor_1.ExpressionRuleEditor {
    getTestValueColor(el, testcontext) {
        if (!testcontext)
            return undefined;
        if (!testcontext)
            return undefined;
        let testitem = testcontext.findItem(el);
        if (testitem?.result === "true") {
            return UIStyleConstants_1.UIStyleConstants.GREEN_COLOR;
        }
        else if (testitem?.result === "false")
            return UIStyleConstants_1.UIStyleConstants.RED_COLOR;
        return undefined;
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.ruleData, control: () => ((0, jsx_runtime_1.jsx)(exports.GroupedBracketedDiv, { issue: this.ruleData.getValidationIssues()[0], direction: "column", children: this.ruleData.elements.map((g, i) => {
                    return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: this.getTestValueColor(g._id, testcontext), children: (0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionLineDiv, { children: [(0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: g }, "g-" + i), this.renderEndOfLine(i)] }, i) })) }, g._id));
                }) })) }));
    }
    addToFromAction(event) {
        event.stopPropagation();
        this.ruleData.add();
    }
    deleteToFromAction(index) {
        this.ruleData.delete(index);
    }
    onGroupTypeSelect(newGroup) {
        this.ruleData.typeOfGroup = newGroup;
        StateManager_1.StateManager.changed(this);
    }
    renderEndOfLine(i) {
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                if (testcontext)
                    return null;
                let isLast = i + 1 === this.ruleData.elements.length;
                let isFirst = i === 0;
                if (isFirst && isLast) {
                    return ((0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionPiece, { "data-testid": "ExpressionGroup-add", children: (0, jsx_runtime_1.jsx)(core_1.IconButton, { size: "small", onClick: this.addToFromAction, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, {}) }) }));
                }
                else if (isFirst && !isLast) {
                    return ((0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionPiece, { "data-testid": "ExpressionGroup-add", children: (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Consumer, { children: (context) => ((0, jsx_runtime_1.jsx)(InlineOptionSelect_1.InlineOptionSelect, { text: this.ruleData.typeOfGroup, options: [AndGroup_1.GroupingType.AND, AndGroup_1.GroupingType.OR], onEdit: this.onGroupTypeSelect, readOnly: context.renderType === ExpressionReactContext_1.ExpressionRenderType.COMPACT ||
                                    context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT })) }) }));
                }
                else if (!isLast) {
                    return ((0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionPiece, { "data-testid": "ExpressionGroup-add", children: [(0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Consumer, { children: (context) => ((0, jsx_runtime_1.jsx)(InlineOptionSelect_1.InlineOptionSelect, { text: this.ruleData.typeOfGroup, options: [AndGroup_1.GroupingType.AND, AndGroup_1.GroupingType.OR], onEdit: this.onGroupTypeSelect, readOnly: context.renderType === ExpressionReactContext_1.ExpressionRenderType.COMPACT ||
                                        context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT })) }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { size: "small", "aria-label": "delete", onClick: (event) => {
                                    event.stopPropagation();
                                    this.deleteToFromAction(i);
                                }, children: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}) })] }));
                }
                else if (isLast) {
                    return ((0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionPiece, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { size: "small", onClick: this.addToFromAction, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { size: "small", "aria-label": "delete", onClick: (event) => {
                                    event.stopPropagation();
                                    this.deleteToFromAction(i);
                                }, children: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}) })] }));
                }
            } }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], AndGroupEditor.prototype, "addToFromAction", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], AndGroupEditor.prototype, "deleteToFromAction", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], AndGroupEditor.prototype, "onGroupTypeSelect", null);
exports.AndGroupEditor = AndGroupEditor;
//# sourceMappingURL=AndGroupEditor.js.map