"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextMergeBuilder = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const Sidebar_1 = require("../CommonUI/BuilderUI/Sidebar");
const Topbar_1 = require("../CommonUI/BuilderUI/Topbar");
const DataIcon_1 = require("../CommonUI/Icon/DataIcon");
const RuleTableIcon_1 = require("../CommonUI/Icon/RuleTableIcon");
const TestDataIcon_1 = require("../CommonUI/Icon/TestDataIcon");
const ObserveState_1 = require("../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const XExecutableTester_1 = require("../CommonUI/Testing/XExecutableTester");
const TextMergeBuilderPage_1 = require("@appglue/common/dist/TextMerge/TextMergeBuilderPage");
const TextMergeEditContext_1 = require("@appglue/common/dist/TextMerge/TextMergeEditContext");
const TextMergeBuilderEditor_1 = require("./Builder/TextMergeBuilderEditor");
const CodingIcon_1 = require("../CommonUI/Icon/CodingIcon");
const XBuilderEditPage_1 = require("../CommonUI/BuilderUI/XBuilderEditPage");
const DataBuilder_1 = require("../DataBuilder/DataBuilder");
class TextMergeBuilder extends react_1.Component {
    tabs = [];
    editContext;
    constructor(props) {
        super(props);
        this.editContext = new TextMergeEditContext_1.TextMergeEditContext(props.definition);
        this.editContext.title = props.textMergeName;
        if (props.onSave) {
            this.editContext.onSave = props.onSave;
        }
        if (props.onCancel) {
            this.editContext.onCancel = props.onCancel;
        }
        if (props.onChange) {
            this.editContext.onUpdate = props.onChange;
        }
        this.tabs = this.getDefaultTabs();
        if (props.value) {
            this.props.definition.setValue(props.value);
        }
    }
    getDefaultTabs() {
        return [
            {
                value: TextMergeBuilderPage_1.TextMergeBuilderPage.TextEditor,
                renderUI: () => ((0, jsx_runtime_1.jsx)(TextMergeBuilderEditor_1.TextMergeBuilderEditor, { definition: this.props.definition, editContext: this.editContext })),
                icon: (0, jsx_runtime_1.jsx)(RuleTableIcon_1.RuleTableIcon, {}),
            },
            {
                value: TextMergeBuilderPage_1.TextMergeBuilderPage.Data,
                renderUI: () => ((0, jsx_runtime_1.jsx)(DataBuilder_1.DataBuilder, { definition: this.props.definition.getInputDefinition(), readOnly: !this.props.definition.canChangeInputs })),
                icon: (0, jsx_runtime_1.jsx)(DataIcon_1.DataIcon, {}),
            },
            {
                value: TextMergeBuilderPage_1.TextMergeBuilderPage.Configuration,
                renderUI: () => (0, jsx_runtime_1.jsx)(XBuilderEditPage_1.XBuilderEditPage, { builder: this.props.definition, updateCallback: () => { } }),
                icon: (0, jsx_runtime_1.jsx)(CodingIcon_1.CodingIcon, {}),
            },
            {
                value: TextMergeBuilderPage_1.TextMergeBuilderPage.Test,
                renderUI: () => ((0, jsx_runtime_1.jsx)(XExecutableTester_1.XExecutableTester, { saveUnitTest: this.props.saveUnitTest, executable: this.props.definition })),
                icon: (0, jsx_runtime_1.jsx)(TestDataIcon_1.TestDataIcon, {}),
            },
        ];
    }
    onUpdateName(newName) {
        this.editContext.title = newName;
        StateManager_1.StateManager.propertyChanged(this.editContext, "title");
        if (this.props.onTextMergeNameUpdate)
            this.props.onTextMergeNameUpdate(newName);
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(BuilderRender, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.editContext, properties: ["title"], control: () => {
                        return ((0, jsx_runtime_1.jsx)(Topbar_1.Topbar, { onChangeName: this.onUpdateName, editContext: this.editContext, name: this.editContext.title, isActionDisabled: false, isRequiredActionGroup: false, 
                            // todo: is there a story where save does not show up?
                            onSave: this.editContext.onSave
                                ? () => {
                                    if (this.editContext.onSave) {
                                        this.editContext.onSave();
                                    }
                                }
                                : undefined, onClose: this.editContext.onCancel }));
                    } }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.editContext, properties: ["mode"], control: () => ((0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { items: this.tabs, value: this.editContext.mode, onChange: (mode) => {
                            Reflect.set(this.editContext, "mode", mode);
                            StateManager_1.StateManager.propertyChanged(this.editContext, "mode");
                        } })) })] }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], TextMergeBuilder.prototype, "onUpdateName", null);
exports.TextMergeBuilder = TextMergeBuilder;
const BuilderRender = styled_components_1.default.div `
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
`;
//# sourceMappingURL=TextMergeBuilder.js.map