import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Button, FormControl, RadioGroup } from "@material-ui/core";
import styled from "styled-components";
import { DockedSidebar } from "../BuildUI/DockSidebar";
import { EditLayerConfigArea, EditLayerStyledAccordion, EditLayerStyledAccordionSummary, EditLayerStyledTypography, EditLayerStyledAccordionDetails, } from "../CommonStyles";
import { StyledFormControlLabel } from "../Components/FormControlLabel";
import { SettingIcon } from "../Icon/SettingIcon";
import { ObserveState } from "../StateManagement/ObserveState";
import { StateManager } from "../StateManagement/StateManager";
import XTextMerge from "./XTextMerge";
import { StyledRadio } from "../Components/Radio";
import { TestContext } from "../../Tester/TestContext";
import { ValidationInformation } from "../../Rule/DesignUI/ValidationInformation";
import { XTextMergeExportType } from "./TextMergeExportType";
export const XTextMergeDesigner = ({ definition, editContext }) => {
    const [openSettingsLayer, setOpenSettingsLayer] = React.useState(false);
    const testContext = React.useContext(TestContext);
    if (testContext) {
        return (_jsx(DesignerInTester, { children: _jsx(TextMergeRender, { children: _jsx(XTextMerge, { definition: definition, editContext: editContext }, void 0) }, void 0) }, void 0));
    }
    return (_jsxs(DesignerRender, { children: [_jsx(ToolbarRender, { children: _jsx(Button, Object.assign({ startIcon: _jsx(SettingIcon, {}, void 0), className: "RuleHeader-button", "data-testid": "RuleSetting-button", onClick: () => setOpenSettingsLayer(true) }, { children: "Settings" }), void 0) }, void 0),
            _jsx(DockedSidebar, { sidebar: () => {
                    return (_jsx(EditLayerConfigArea, { children: _jsxs(EditLayerStyledAccordion, Object.assign({ expanded: true, onChange: () => { }, defaultExpanded: true }, { children: [_jsx(EditLayerStyledAccordionSummary, { children: _jsx(EditLayerStyledTypography, Object.assign({ variant: "subtitle1", classes: { root: "config-form-header" } }, { children: "Settings" }), void 0) }, void 0),
                                _jsx(EditLayerStyledAccordionDetails, Object.assign({ classes: { root: "config-form-content" } }, { children: _jsx(ObserveState, { listenTo: definition, control: () => (_jsx(FormControl, Object.assign({ component: "fieldset" }, { children: _jsxs(RadioGroup, Object.assign({ value: definition.outputType, onChange: (event, value) => {
                                                    event.stopPropagation();
                                                    definition.outputType = value;
                                                    StateManager.propertyChanged(definition, "outputType");
                                                }, name: "radio-buttons-group" }, { children: [_jsx(StyledFormControlLabel, { value: XTextMergeExportType.TEXT, control: _jsx(StyledRadio, {}, void 0), label: XTextMergeExportType.TEXT }, void 0),
                                                    _jsx(StyledFormControlLabel, { value: XTextMergeExportType.HTML, control: _jsx(StyledRadio, {}, void 0), label: XTextMergeExportType.HTML }, void 0)] }), void 0) }), void 0)) }, void 0) }), void 0)] }), void 0) }, void 0));
                }, content: () => (_jsxs(TextMergeRender, { children: [_jsx(ObserveState, { listenTo: definition, properties: ["outputType"], control: () => {
                                return _jsx(XTextMerge, { definition: definition, editContext: editContext }, void 0);
                            } }, void 0),
                        _jsx(ObserveState, { listenTo: definition, properties: ["updateMergeText"], control: () => {
                                return _jsx(ValidationInformation, { provider: definition }, void 0);
                            } }, void 0)] }, void 0)), sidebarWidth: 350, open: openSettingsLayer, onClose: () => setOpenSettingsLayer(false) }, void 0)] }, void 0));
};
const DesignerRender = styled.div `
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    background: #f7f8fc;
    position: relative;
`;
const ToolbarRender = styled.div `
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px 8px;
    border-bottom: 3px solid rgba(96, 104, 129, 0.1);

    .RuleHeader-button {
        font-family: Inter;
        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.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.div `
    display: flex;
    flex-direction: column;

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