"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextMergeBuilderEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DockSidebar_1 = require("../../CommonUI/BuilderUI/DockSidebar");
const CommonStyles_1 = require("../../CommonUI/CommonStyles");
const UIFormControlLabel_1 = require("../../CommonUI/BuildlingBlocks/UIFormControlLabel");
const SettingIcon_1 = require("../../CommonUI/Icon/SettingIcon");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const TextMergeEditor_1 = tslib_1.__importDefault(require("./TextMergeEditor"));
const UIRadioButton_1 = require("../../CommonUI/BuildlingBlocks/UIRadioButton");
const TestContext_1 = require("../../CommonUI/Testing/TestContext");
const ValidationInformation_1 = require("../../Rule/DesignUI/ValidationInformation");
const TextMergeExportType_1 = require("@appglue/common/dist/TextMerge/TextMergeExportType");
// todo: what is this?  we have editor and builder.  not sure what a designer is.  is this an internal piece?
// if so, remoe the x and name it TextMergeBuilderEditor or something.
const TextMergeBuilderEditor = ({ definition, editContext }) => {
    const [openSettingsLayer, setOpenSettingsLayer] = react_1.default.useState(false);
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    if (testContext) {
        return ((0, jsx_runtime_1.jsx)(DesignerInTester, { children: (0, jsx_runtime_1.jsx)(TextMergeRender, { children: (0, jsx_runtime_1.jsx)(TextMergeEditor_1.default, { definition: definition, editContext: editContext }) }) }));
    }
    return ((0, jsx_runtime_1.jsxs)(DesignerRender, { children: [(0, jsx_runtime_1.jsx)(ToolbarRender, { children: (0, jsx_runtime_1.jsx)(core_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(SettingIcon_1.SettingIcon, {}), className: "RuleHeader-button", "data-testid": "RuleSetting-button", onClick: () => setOpenSettingsLayer(true), children: "Settings" }) }), (0, jsx_runtime_1.jsx)(DockSidebar_1.DockedSidebar, { sidebar: () => {
                    return ((0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerConfigArea, { children: (0, jsx_runtime_1.jsxs)(CommonStyles_1.EditLayerStyledAccordion, { expanded: true, onChange: () => { }, defaultExpanded: true, children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionSummary, { children: (0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledTypography, { variant: "subtitle1", classes: { root: "config-form-header" }, children: "Settings" }) }), (0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionDetails, { classes: { root: "config-form-content" }, children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: definition, control: () => ((0, jsx_runtime_1.jsx)(core_1.FormControl, { component: "fieldset", children: (0, jsx_runtime_1.jsxs)(core_1.RadioGroup, { value: definition.outputType, onChange: (event, value) => {
                                                    event.stopPropagation();
                                                    definition.outputType = value;
                                                    StateManager_1.StateManager.propertyChanged(definition, "outputType");
                                                }, name: "radio-buttons-group", children: [(0, jsx_runtime_1.jsx)(UIFormControlLabel_1.UIFormControlLabel, { value: TextMergeExportType_1.XTextMergeExportType.TEXT, control: (0, jsx_runtime_1.jsx)(UIRadioButton_1.UIRadioButton, {}), label: TextMergeExportType_1.XTextMergeExportType.TEXT }), (0, jsx_runtime_1.jsx)(UIFormControlLabel_1.UIFormControlLabel, { value: TextMergeExportType_1.XTextMergeExportType.HTML, control: (0, jsx_runtime_1.jsx)(UIRadioButton_1.UIRadioButton, {}), label: TextMergeExportType_1.XTextMergeExportType.HTML })] }) })) }) })] }) }));
                }, content: () => ((0, jsx_runtime_1.jsxs)(TextMergeRender, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: definition, properties: ["outputType"], control: () => {
                                return (0, jsx_runtime_1.jsx)(TextMergeEditor_1.default, { definition: definition, editContext: editContext });
                            } }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: definition, properties: ["updateMergeText"], control: () => {
                                return (0, jsx_runtime_1.jsx)(ValidationInformation_1.ValidationInformation, { provider: definition });
                            } })] })), sidebarWidth: 350, open: openSettingsLayer, onClose: () => setOpenSettingsLayer(false) })] }));
};
exports.TextMergeBuilderEditor = TextMergeBuilderEditor;
const DesignerRender = styled_components_1.default.div `
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    background: #f7f8fc;
    position: relative;
`;
const ToolbarRender = styled_components_1.default.div `
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px 8px;
    border-bottom: 3px solid rgba(96, 104, 129, 0.1);

    .RuleHeader-button {
        font-size: 12px;
        font-style: normal;
        line-height: 17px;
        letter-spacing: 0em;
        font-weight: 500;
        text-align: center;
        color: #4050a6;

        padding: 0;

        margin-left: 16px;

        &:first-child {
            margin-left: 0;
        }
    }
`;
const TextMergeRender = styled_components_1.default.div `
    padding: 16px 24px;
    height: 100%;

    position: relative;

    .MergeEditor-editor {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .RichEditor-root {
            flex: 1;

            display: flex;
            flex-direction: column;
            overflow: hidden;

            .RichEditor-editor {
                flex: 1;
                overflow: auto;
            }
        }
    }
`;
const DesignerInTester = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    height: 80vh;
`;
//# sourceMappingURL=TextMergeBuilderEditor.js.map