import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Component } from "react";
import styled from "styled-components";
import { AutoBind } from "../../Common/AutoBind";
import { Sidebar } from "../BuildUI/Sidebar";
import { Topbar } from "../BuildUI/Topbar";
import { XDefinitionEditor } from "../DataDesigner/XDefinitionEditor";
import { DataIcon } from "../Icon/DataIcon";
import { RuleTableIcon } from "../Icon/RuleTableIcon";
import { TestDataIcon } from "../Icon/TestDataIcon";
import { ObserveState } from "../StateManagement/ObserveState";
import { StateManager } from "../StateManagement/StateManager";
import { XExecutableTester } from "../Testing/XExecutableTester";
import { TextMergeBuilderPage } from "./TextMergeBuilderPage";
import { XTextMergeEditContext } from "./XTextMergeEditContext";
import { XTextMergeDesigner } from "./XTextMergeDesigner";
export class XTextMergeBuilder extends Component {
    constructor(props) {
        super(props);
        this.tabs = [];
        this.editContext = new XTextMergeEditContext(props.definition);
        this.editContext.title = props.title;
        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.TextEditor,
                renderUI: () => (_jsx(XTextMergeDesigner, { definition: this.props.definition, editContext: this.editContext }, void 0)),
                icon: _jsx(RuleTableIcon, {}, void 0),
            },
            {
                value: TextMergeBuilderPage.Data,
                renderUI: () => (_jsx(XDefinitionEditor, { definition: this.props.definition.getInputDefinition(), readOnly: !this.props.definition.canChangeInputs }, void 0)),
                icon: _jsx(DataIcon, {}, void 0),
            },
            {
                value: TextMergeBuilderPage.Test,
                renderUI: () => _jsx(XExecutableTester, { executable: this.props.definition }, void 0),
                icon: _jsx(TestDataIcon, {}, void 0),
            },
        ];
    }
    onChangeTitle(event) {
        this.editContext.title = event.target.value;
        StateManager.propertyChanged(this.editContext, "title");
    }
    render() {
        return (_jsxs(BuilderRender, { children: [_jsx(ObserveState, { listenTo: this.editContext, properties: ["title"], control: () => {
                        return (_jsx(Topbar, { onChangeName: this.onChangeTitle, editContext: this.editContext, name: this.editContext.title, isActionDisabled: false, isRequiredActionGroup: false, onSave: this.editContext.onSave
                                ? (data) => {
                                    if (this.editContext.onSave) {
                                        this.editContext.onSave();
                                    }
                                }
                                : undefined, onClose: this.editContext.onCancel }, 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)
], XTextMergeBuilder.prototype, "onChangeTitle", null);
const BuilderRender = styled.div `
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
`;
//# sourceMappingURL=XTextMergeBuilder.js.map