import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Component } from "react";
import { AutoBind } from "../../Common/AutoBind";
import { Sidebar } from "../../CommonUI/BuildUI/Sidebar";
import { Topbar } from "../../CommonUI/BuildUI/Topbar";
import { XDefinitionEditor } from "../../CommonUI/DataDesigner/XDefinitionEditor";
import { DataIcon } from "../../CommonUI/Icon/DataIcon";
import { RuleTableIcon } from "../../CommonUI/Icon/RuleTableIcon";
import { TestDataIcon } from "../../CommonUI/Icon/TestDataIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { XExecutableTester } from "../../CommonUI/Testing/XExecutableTester";
import { RuleEditorDiv } from "../DesignUI/CommonStyles";
import { RuleBuilderPage } from "../DesignUI/RuleBuilderPage";
import { TreeRuleDesigner } from "./Components/TreeRuleDesigner";
import { TreeRuleEditContext } from "./TreeRuleEditContext";
export class XTreeRuleEditor extends Component {
    constructor(props) {
        super(props);
        this.ruleDefinition = props.ruleDefinition;
        this.editContext = new TreeRuleEditContext(props.ruleDefinition);
        if (props.title) {
            this.editContext.title = props.title;
        }
        if (props.onRuleSave) {
            this.editContext.onRuleSave = props.onRuleSave;
        }
        if (props.onRuleCancel) {
            this.editContext.onRuleCancel = props.onRuleCancel;
        }
        this.tabs = this.getDefaultTabs();
    }
    onChangeRuleTitle(event) {
        this.editContext.title = event.target.value;
        StateManager.propertyChanged(this.editContext, "title");
    }
    getDefaultTabs() {
        return [
            {
                value: RuleBuilderPage.Rule,
                renderUI: () => (_jsx(TreeRuleDesigner, { editContext: this.editContext, ruleDefinition: this.ruleDefinition }, void 0)),
                icon: _jsx(RuleTableIcon, {}, void 0),
            },
            {
                value: RuleBuilderPage.Data,
                renderUI: () => (_jsx(XDefinitionEditor, { definition: this.props.ruleDefinition.getInputDefinition(), readOnly: !this.props.ruleDefinition.canChangeInputs }, void 0)),
                icon: _jsx(DataIcon, {}, void 0),
            },
            {
                value: RuleBuilderPage.Test,
                renderUI: () => _jsx(XExecutableTester, { executable: this.props.ruleDefinition }, void 0),
                icon: _jsx(TestDataIcon, {}, void 0),
            },
        ];
    }
    render() {
        return (_jsxs(RuleEditorDiv, { children: [_jsx(ObserveState, { listenTo: this.editContext, properties: ["title"], control: () => {
                        return (_jsx(Topbar, { onChangeName: this.onChangeRuleTitle, editContext: this.editContext, name: this.editContext.title, isActionDisabled: !this.editContext.lastSelectionElement, isRequiredActionGroup: false, onSave: this.editContext.onRuleSave
                                ? (data) => {
                                    if (this.editContext.onRuleSave) {
                                        this.editContext.onRuleSave();
                                    }
                                }
                                : undefined, onClose: this.editContext.onRuleCancel }, void 0));
                    } }, void 0),
                _jsx(ObserveState, { listenTo: this.editContext, properties: ["mode"], control: () => (_jsx(Sidebar, { items: this.tabs, value: this.editContext.mode, onChange: (mode) => {
                            Reflect.set(this.editContext, "mode", mode);
                            StateManager.propertyChanged(this.editContext, "mode");
                        } }, void 0)) }, void 0)] }, void 0));
    }
}
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], XTreeRuleEditor.prototype, "onChangeRuleTitle", null);
//# sourceMappingURL=TreeRuleEditor.js.map