import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { ClickAwayListener, Typography, ListItemText, List, ListItem } from "@material-ui/core";
import styled from "styled-components";
import Editor from "@draft-js-plugins/editor";
import { EditorState, convertFromRaw, convertToRaw } from "draft-js";
import { TestContext } from "../../Tester/TestContext";
import TurndownService from "turndown";
import { plugins, RichTextEditor, RichTextEditorRender, } from "../RichTextEditor";
import { Droppable, DragDropContext, Draggable, } from "react-beautiful-dnd";
import { addEntity, variableRenderPlugin, getEntityRange, valueEditorPlugin, tempVariableRenderPlugin, TextMergeUtility, } from "./XTextMergeUtilities";
import { ObjectDataDefinition } from "../../Common/Data/Definitions/ObjectDataDefinition";
import { UndefinedDataDefinition } from "../../Common/Data/Definitions/UndefinedDataDefinition";
import { DataUtilities } from "../../Common/DataUtilities";
import { StyledLink } from "../BuildUI/Link";
import { Layer } from "../Components/Layer";
import { OpenBlueIcon } from "../Icon/OpenBlueIcon";
import { StateManager } from "../StateManagement/StateManager";
import VariablePicker from "../VariablePicker";
import { StyledButton } from "../Components/Button";
import { XDataType } from "../../Common/Data/XDataType";
import { AutoBind } from "../../Common/AutoBind";
import { TextMergeConstants } from "./TextMergeConstants";
import { XTextMergeExportType } from "./TextMergeExportType";
export const turndownService = new TurndownService();
export default class XTextMerge extends RichTextEditor {
    constructor(props) {
        super(props);
        this.plugins = [...plugins, variableRenderPlugin, tempVariableRenderPlugin];
        this.renderListFields = (fields, keys = []) => {
            return (_jsx(_Fragment, { children: _jsx(List, { children: fields.map((f) => {
                        const path = [...keys, f.name || ""].join(".");
                        if (f.type === XDataType.OBJECT) {
                            const subfields = Reflect.get(f, "fields");
                            return (_jsxs(React.Fragment, { children: [_jsx(Draggable, Object.assign({ draggableId: path, index: 0 }, { children: (provided, snapshot) => (_jsx(ListItem, Object.assign({ button: true, "data-testid": path, ref: provided.innerRef, classes: { root: snapshot.isDragging ? "isDragging" : "" } }, provided.draggableProps, provided.dragHandleProps, { children: _jsx(ListItemText, { primary: f.name, classes: {
                                                    primary: "MuiListItemText-object",
                                                } }, void 0) }), void 0)) }), void 0),
                                    _jsx(NestedListWrapper, { children: subfields.length
                                            ? this.renderListFields(subfields, [...keys, f.name || ""])
                                            : null }, void 0)] }, path));
                        }
                        else {
                            return (_jsx(Draggable, Object.assign({ draggableId: path, index: 0 }, { children: (provided, snapshot) => (_jsxs(ListItem, Object.assign({ button: true, "data-testid": path, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { classes: { root: snapshot.isDragging ? "isDragging" : "" } }, { children: [_jsx(ListItemText, { primary: f.name }, void 0),
                                        _jsx(ListItemText, { secondary: f.type }, void 0)] }), void 0)) }), void 0));
                        }
                    }) }, void 0) }, void 0));
        };
        this.getCurrentHTML = () => {
            return TextMergeUtility.MergeToHTML(this.state.editorState, this.state.previewContext);
        };
        this.onChange = (editorState) => {
            const currentContentState = this.state.editorState.getCurrentContent();
            let newContentState = editorState.getCurrentContent();
            if (this.props.updateCallback) {
                const html = this.getCurrentHTML();
                this.props.updateCallback(html);
            }
            let rawState = convertToRaw(editorState.getCurrentContent());
            this.props.editContext.onTextChange(rawState);
            if (currentContentState !== newContentState) {
                // There was a change in the content
                const selection = this.state.editorState.getSelection();
                const start = selection.getStartOffset();
                const end = selection.getEndOffset();
                const anchorKey = selection.getAnchorKey();
                const currentContentBlock = newContentState.getBlockForKey(anchorKey);
                let entities = [];
                for (let i = start; i < end; i++) {
                    let entityKey = currentContentBlock.getEntityAt(i);
                    if (entityKey) {
                        entities.push(entityKey);
                    }
                }
                const currentStyle = editorState.getCurrentInlineStyle();
                let styles = {};
                if (entities.length) {
                    for (let styleKey in this.props.definition.styleMap) {
                        if (currentStyle.has(styleKey)) {
                            styles = Object.assign(Object.assign({}, styles), this.props.definition.styleMap[styleKey]);
                        }
                    }
                    if (currentStyle.has("BOLD")) {
                        styles = Object.assign(Object.assign({}, styles), { fontWeight: "bold" });
                    }
                    if (currentStyle.has("ITALIC")) {
                        styles = Object.assign(Object.assign({}, styles), { fontStyle: "italic" });
                    }
                    if (Object.keys(styles).length > 0) {
                        for (let entityKey of entities) {
                            newContentState = editorState.getCurrentContent();
                            let entity = newContentState.getEntity(entityKey);
                            if (entity.getType() === TextMergeConstants.MERGE_TEXT_ENTITY_TYPE) {
                                let newContent = newContentState.replaceEntityData(entityKey, Object.assign(Object.assign({}, entity.getData()), { styles }));
                                editorState = EditorState.createWithContent(newContent);
                            }
                        }
                    }
                }
            }
            if (this.props.onChange) {
                this.props.onChange(rawState);
            }
            this.setState({
                editorState: editorState,
            });
            StateManager.propertyChanged(this.props.definition, "updateMergeText");
        };
        this.handleClick = () => {
            const [newEditorState, entityKey] = addEntity(this.state.editorState, TextMergeConstants.MERGE_TEXT_ENTITY_TYPE, " ", {
                fieldpath: "unset",
                field: new UndefinedDataDefinition(),
                onUpdateValue: this.onUpdateValue,
                showModalWithEntity: this.showModalWithEntity,
                isValidField: this.isValidField,
            });
            if (newEditorState) {
                this.setState({ editorState: newEditorState });
                StateManager.propertyChanged(this.props.definition, "updateMergeText");
                if (entityKey) {
                    this.showModalWithEntity(entityKey);
                }
            }
        };
        this.onCloseOpenVariablePicker = () => {
            let selection = this.state.editorState.getSelection();
            if (this.state.currentEntity) {
                const entityRange = getEntityRange(this.state.editorState, this.state.currentEntity);
                const isBackward = selection.getIsBackward();
                if (!entityRange) {
                    return;
                }
                if (isBackward) {
                    selection = selection.merge({
                        anchorOffset: entityRange.end,
                        focusOffset: entityRange.start,
                    });
                }
                else {
                    selection = selection.merge({
                        anchorOffset: entityRange.start,
                        focusOffset: entityRange.end,
                    });
                }
                let newEditorState = EditorState.forceSelection(this.state.editorState, selection);
                this.setState({ editorState: newEditorState });
                StateManager.propertyChanged(this.props.definition, "updateMergeText");
            }
        };
        this.onUpdateValue = (fieldpath, newValue) => {
            let data = Object.assign({}, this.state.previewContext);
            DataUtilities.set(data, fieldpath, newValue);
            this.setState({
                previewContext: Object.assign({}, data),
            });
        };
        this.showModalWithEntity = (entity) => {
            if (entity) {
                this.setState({ currentEntity: entity });
                const { fieldpath, field } = this.state.editorState.getCurrentContent().getEntity(entity).getData();
                this.setState({
                    fieldpath: fieldpath === "unset" ? "" : fieldpath,
                    field: fieldpath === "unset" ? undefined : field,
                    openVariablePicker: true,
                });
            }
        };
        this.onCloseVariablePicker = () => {
            this.setState({
                openVariablePicker: false,
                previewContext: {},
            });
        };
        this.onVariableSet = (path, def) => {
            let changedProperties = ["selected"];
            let newfield;
            let fieldpath = "";
            if (path === "") {
                this.onCloseVariablePicker();
                return;
            }
            if (def) {
                let data = this.props.definition.getInputDefinition();
                if (path !== "") {
                    data = DataUtilities.getFieldFromDataDefinitionByProperty(this.props.definition.getInputDefinition().fields, path, "name");
                    fieldpath = `${path}.${def.name}`;
                }
                else {
                    fieldpath = def.name;
                }
                data.fields.push(def);
                newfield = def;
            }
            else {
                newfield = DataUtilities.getFieldFromDataDefinitionByProperty(this.props.definition.getInputDefinition().fields, path, "name");
                fieldpath = path;
            }
            changedProperties.push("data");
            StateManager.propertiesChanged(this, changedProperties);
            this.setState({
                field: newfield,
                fieldpath,
                openVariablePicker: false,
            }, () => {
                let content = this.state.editorState.getCurrentContent();
                if (this.state.currentEntity === "") {
                    return this.onCloseOpenVariablePicker();
                }
                let newContent = content.replaceEntityData(this.state.currentEntity, {
                    fieldpath: this.state.fieldpath,
                    entityKey: this.state.currentEntity,
                    field: this.state.field,
                    onUpdateValue: this.onUpdateValue,
                    showModalWithEntity: this.showModalWithEntity,
                    isValidField: this.isValidField,
                });
                let newEditorState = EditorState.createWithContent(newContent);
                this.setState({ editorState: newEditorState, fieldpath: "", field: undefined });
                this.onCloseOpenVariablePicker();
            });
        };
        this.isValidField = (fieldpath) => {
            if (!this.props.definition.getInputDefinition()) {
                return false;
            }
            try {
                let field = DataUtilities.getFieldFromDataDefinitionByProperty(this.props.definition.getInputDefinition().fields, fieldpath, "name");
                if (field.list)
                    return false;
                if (field instanceof ObjectDataDefinition) {
                    return false;
                }
                return true;
            }
            catch (e) {
                return false;
            }
        };
        this.onTogglePanel = () => {
            this.setState({
                openVariablePanel: !this.state.openVariablePanel,
            });
        };
        this.onOpenPreviewModal = () => {
            this.setState({
                openPreview: true,
            });
        };
        this.onClosePreviewModal = () => {
            this.setState({
                openPreview: false,
                previewContext: {},
            });
        };
        this.onDragUpdate = (result) => {
            if (!result.destination) {
                return;
            }
            if (result.source.droppableId === "XTextMerge_SIDEBAR" &&
                result.destination.droppableId === "XTextMergeEditor" &&
                !this.state.tempEditState) {
                try {
                    let fieldpath = result.draggableId;
                    let field = DataUtilities.getFieldFromDataDefinitionByProperty(this.props.definition.getInputDefinition().fields, fieldpath, "name");
                    const [newEditorState] = addEntity(this.state.editorState, TextMergeConstants.MERGE_TEXT_TEMP_ENTITY_TYPE, " ", {
                        fieldpath,
                        field,
                    });
                    if (newEditorState) {
                        this.setState({
                            editorState: newEditorState,
                            tempEditState: this.state.editorState,
                        });
                    }
                }
                catch (e) { }
            }
        };
        this.onDragEnd = (result) => {
            if (!result.destination) {
                if (!!this.state.tempEditState) {
                    this.setState({
                        editorState: this.state.tempEditState,
                        tempEditState: undefined,
                    });
                }
                return;
            }
            if (result.source.droppableId === "XTextMerge_SIDEBAR" &&
                result.destination.droppableId === "XTextMergeEditor" &&
                !!this.state.tempEditState) {
                try {
                    let fieldpath = result.draggableId;
                    let field = DataUtilities.getFieldFromDataDefinitionByProperty(this.props.definition.getInputDefinition().fields, fieldpath, "name");
                    const [newEditorState] = addEntity(this.state.tempEditState, TextMergeConstants.MERGE_TEXT_ENTITY_TYPE, " ", {
                        fieldpath,
                        field,
                        onUpdateValue: this.onUpdateValue,
                        showModalWithEntity: this.showModalWithEntity,
                        isValidField: this.isValidField,
                    });
                    if (newEditorState) {
                        this.setState({ editorState: newEditorState, tempEditState: undefined });
                        StateManager.propertyChanged(this.props.definition, "updateMergeText");
                    }
                }
                catch (e) { }
            }
            else {
                if (this.state.tempEditState) {
                    this.setState({
                        editorState: this.state.tempEditState,
                        tempEditState: undefined,
                    });
                }
            }
        };
        let rawState = this.props.definition.value;
        for (let entityKey in rawState.entityMap) {
            if (rawState.entityMap[entityKey].type === TextMergeConstants.MERGE_TEXT_ENTITY_TYPE) {
                rawState.entityMap[entityKey].data = Object.assign(Object.assign({}, rawState.entityMap[entityKey].data), { onUpdateValue: this.onUpdateValue, showModalWithEntity: this.showModalWithEntity, isValidField: this.isValidField });
            }
        }
        let editorState = EditorState.createWithContent(convertFromRaw(rawState));
        this.state = {
            editorState: editorState,
            styleMap: this.props.definition.styleMap,
            showSettingsDialog: false,
            toolbarSettings: {
                toolbar: "top",
                view: "editor",
                showToolbar: true,
            },
            hideTools: props.hideTools,
            // spaneditor states
            currentEntity: "",
            field: undefined,
            fieldpath: "",
            openVariablePanel: false,
            openVariablePicker: false,
            openPreview: false,
            previewContext: {},
            tempEditState: undefined,
        };
    }
    renderToolbar() {
        if (this.props.definition.outputType === XTextMergeExportType.TEXT)
            return null;
        return super.renderToolbar();
    }
    renderEditor() {
        const { editorState, toolbarSettings } = this.state;
        let className = "RichEditor-editor";
        var contentState = editorState.getCurrentContent();
        if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== "unstyled") {
                className += " RichEditor-hidePlaceholder";
            }
        }
        if (this.context) {
            return (_jsx(RichTextEditorRender, Object.assign({ className: "RichEditor-root", "data-testid": "Editor", hideBorder: false }, { children: _jsx("div", Object.assign({ className: className, "data-testid": "editorComponent", onClick: this.focus }, { children: _jsx(Editor, { editorState: editorState, onChange: this.onChange, placeholder: this.props.placeholder || "Tell a story...", customStyleMap: this.state.styleMap, spellCheck: true, handleKeyCommand: this.handleKeyCommand, blockStyleFn: this.getBlockStyle, plugins: [...this.plugins, ...(this.props.plugins || [])], ref: (element) => {
                            this.editor = element;
                        }, readOnly: !!this.context || this.props.readOnly, onFocus: () => {
                            this.setState({
                                hideTools: false,
                            });
                        }, preserveSelectionOnBlur: true }, void 0) }), void 0) }), void 0));
        }
        return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
                if (this.state.toolbarSettings.view === "click to edit") {
                    this.setState({
                        hideTools: true,
                    });
                }
            } }, { children: _jsxs(RichTextEditorRender, Object.assign({ className: "RichEditor-root", "data-testid": "Editor", hideBorder: this.props.hideBorder }, { children: [toolbarSettings.toolbar !== "bottom" && _jsx(_Fragment, { children: this.renderToolbar() }, void 0),
                    _jsx(Droppable, Object.assign({ droppableId: "XTextMergeEditor" }, { children: (provided) => (_jsx("div", Object.assign({ className: className, "data-testid": "editorComponent", onClick: this.focus, ref: provided.innerRef }, provided.droppableProps, { children: _jsx(Editor, { editorState: editorState, onChange: this.onChange, placeholder: this.props.placeholder || "Tell a story...", customStyleMap: this.state.styleMap, spellCheck: true, handleKeyCommand: this.handleKeyCommand, blockStyleFn: this.getBlockStyle, plugins: [...this.plugins, ...(this.props.plugins || [])], ref: (element) => {
                                    this.editor = element;
                                }, readOnly: !!this.context || this.props.readOnly, onFocus: () => {
                                    this.setState({
                                        hideTools: false,
                                    });
                                }, preserveSelectionOnBlur: true }, void 0) }), void 0)) }), void 0),
                    toolbarSettings.toolbar === "bottom" && _jsx(_Fragment, { children: this.renderToolbar() }, void 0)] }), void 0) }), void 0));
    }
    render() {
        return (_jsx(DragDropContext, Object.assign({ onDragEnd: this.onDragEnd, onDragUpdate: this.onDragUpdate }, { children: _jsxs(MergeEditorRender, { children: [this.state.openVariablePanel && (_jsxs("div", Object.assign({ className: "MergeEditor-variablePanel" }, { children: [_jsx(Typography, Object.assign({ variant: "h5", classes: {
                                    root: "MergeEditor-variablePanelTitle",
                                } }, { children: "Variables" }), void 0),
                            _jsx(Droppable, Object.assign({ droppableId: `XTextMerge_SIDEBAR` }, { children: (provided, snapshot) => {
                                    return (_jsx(VariableSidebarContent, Object.assign({ ref: provided.innerRef }, provided.droppableProps, { children: this.renderListFields(this.props.definition.getInputDefinition().fields) }), void 0));
                                } }), void 0)] }), void 0)),
                    _jsxs("div", Object.assign({ className: "MergeEditor-editor" }, { children: [!this.context && (_jsxs("div", Object.assign({ className: "MergeEditor-editorButtons" }, { children: [_jsxs(StyledLink, Object.assign({ onClick: this.onTogglePanel, classes: { root: "MergeEditor-link" } }, { children: [_jsx(OpenBlueIcon, {}, void 0), this.state.openVariablePanel ? "Close Variables panel" : "Open Variables panel"] }), void 0),
                                    _jsx(StyledButton, Object.assign({ onClick: this.handleClick, variant: "contained", color: "primary", style: { margin: "10px 0px 10px auto" }, classes: { root: "MergeEditor-buttonRoot" }, "data-testid": "MergeEditor-insertField" }, { children: "Insert Field" }), void 0),
                                    _jsx(StyledButton, Object.assign({ onClick: this.onOpenPreviewModal, color: "primary", style: { margin: this.context ? "10px 0px 10px auto" : "10px 0px 10px 8px" }, variant: "outlined", classes: { root: "MergeEditor-buttonRoot" }, "data-testid": "MergeEditor-previewButton" }, { children: "Preview" }), void 0)] }), void 0)), this.renderEditor()] }), void 0),
                    _jsx(Layer, { open: this.state.openVariablePicker, onClose: this.onCloseVariablePicker, showCloseButton: true, renderUI: () => (_jsxs(VarialbePickerRender, Object.assign({ className: "MergeEditor-variablePicker" }, { children: [_jsx(Typography, Object.assign({ variant: "h5", classes: {
                                        root: "MergeEditor-variablePickerTitle",
                                    } }, { children: "Variables" }), void 0),
                                _jsx(VariablePicker, { selected: this.state.fieldpath, data: this.props.definition.getInputDefinition(), onVariableSet: this.onVariableSet, allowNewVariable: false, notPopup: true, inputProps: {
                                        fullWidth: true,
                                    } }, void 0)] }), void 0)) }, void 0),
                    _jsx(Layer, { open: this.state.openPreview, onClose: this.onClosePreviewModal, showCloseButton: true, maxWidth: false, renderUI: () => (_jsxs(PreviewRender, Object.assign({ className: "MergeEditor-previewRoot", "data-testid": "MergeEditor-previewRoot" }, { children: [_jsxs(PreviewHeader, Object.assign({ className: "MergeEditor-previewHeader" }, { children: [_jsx(Typography, Object.assign({ variant: "h5", classes: {
                                                root: "MergeEditor-previewTitle",
                                            } }, { children: "Preview" }), void 0),
                                        _jsx(DownloadButton, Object.assign({ style: { marginLeft: "auto" }, "data-testid": "btn-mergeeditor-export-markdown", href: `data:text/md;charset=UTF-8,${encodeURIComponent(turndownService.turndown(this.getCurrentHTML()))}`, rel: "noopener noreferrer", download: `${this.props.exportFileName || "output"}.md`, target: "_blank" }, { children: "Export Text" }), void 0),
                                        _jsx(DownloadButton, Object.assign({ className: "RichEditor-styleButton", "data-testid": "btn-mergeeditor-export-html", href: `data:text/html;charset=UTF-8,${encodeURIComponent(this.getCurrentHTML())}`, download: `${this.props.exportFileName || "output"}.html`, rel: "noopener noreferrer", style: { marginLeft: "8px" } }, { children: "Export HTML" }), void 0)] }), void 0),
                                _jsxs(PreviewContent, Object.assign({ className: "MergeEditor-previewContent" }, { children: [_jsxs("div", Object.assign({ className: "MergeEditor-previewSample" }, { children: [_jsx("p", Object.assign({ className: "MergeEditor-previewContentTitle" }, { children: "Sample" }), void 0),
                                                _jsx(RichTextEditor, { value: convertToRaw(this.state.editorState.getCurrentContent()), hideTools: true, hideBorder: true, plugins: [valueEditorPlugin], readOnly: true }, void 0)] }), void 0),
                                        _jsxs("div", Object.assign({ className: "MergeEditor-previewResult" }, { children: [_jsx("p", Object.assign({ className: "MergeEditor-previewContentTitle" }, { children: "Result" }), void 0),
                                                _jsx("div", { dangerouslySetInnerHTML: {
                                                        __html: this.getCurrentHTML(),
                                                    } }, void 0)] }), void 0)] }), void 0)] }), void 0)) }, void 0)] }, void 0) }), void 0));
    }
}
XTextMerge.contextType = TestContext;
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", Object)
], XTextMerge.prototype, "renderToolbar", null);
const MergeEditorRender = styled.div `
    display: flex;
    flex-direction: row;

    height: 100%;

    .MergeEditor-buttonRoot {
        padding: 6px 12px !important;
    }

    .MergeEditor-link {
        display: flex;
        align-items: center;
    }

    .MergeEditor-variablePanel {
        width: 220px;

        margin-right: 8px;

        padding: 16px;

        background: #ffffff;
        border: 1px solid #f1f1f6;
        box-sizing: border-box;
        border-radius: 4px;

        display: flex;
        flex-direction: column;

        .MergeEditor-variablePanelTitle {
            //styleName: text/Inter SemiBold 12px;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            letter-spacing: 0px;
            text-align: left;

            margin-bottom: 16px;
        }

        .VariablePicker_root {
            width: 100%;
            .VariablePicker_Content {
                border: none !important;
                padding: 0 !important;

                .MuiList-root .MuiListSubheader-gutters:first-child {
                    padding: 0 !important;
                }
            }
        }

        .VariablePicker-buttonGroups {
            display: none;
        }
    }

    .MergeEditor-editor {
        flex: 1;
        background: #ffffff;
        /* main/border */

        border: 1px solid #f1f1f6;
        box-sizing: border-box;

        .MergeEditor-editorButtons {
            display: flex;
            align-items: center;

            padding: 8px 12px;
        }
    }

    .MuiList-root {
        &.MuiList-padding {
            padding-top: 0;
            padding-bottom: 0;
        }

        .MuiListItem-root {
            padding: 5px 12px;
            display: flex;
            justify-content: space-between;

            &.isDragging {
                background: rgb(224, 224, 224);
                border-radius: 4px;
            }
        }

        .MuiListSubheader-gutters {
            padding: 0 12px;
        }

        .MuiListItemText-root {
            flex: inherit;
            margin: 0;
            .MuiTypography-body1 {
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 17px;
                letter-spacing: 0px;
                text-align: left;
            }

            .MuiListItemText-primary {
                color: #272932;
            }

            .MuiListItemText-object {
                color: rgba(39, 41, 50, 0.4);
            }

            .MuiListItemText-secondary {
                color: rgba(64, 80, 166, 0.5);
                text-transform: capitalize;
            }
        }
    }
`;
const VarialbePickerRender = styled.div `
    .VariablePicker_Content {
        border: none !important;
        padding: 0 !important;
    }

    .MergeEditor-variablePickerTitle {
        //styleName: title/h3 Inter SemiBold 16px;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;

        margin-bottom: 16px;
    }
`;
const PreviewRender = styled.div `
    display: flex;
    flex-direction: column;
`;
const PreviewHeader = styled.div `
    display: flex;
    align-items: center;
    margin-bottom: 11px;

    .MergeEditor-previewTitle {
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
    }
`;
const PreviewContent = styled.div `
    overflow: auto;

    display: flex;

    > div {
        width: 580px;
        height: 790px;

        border: 1px solid rgba(64, 80, 166, 0.4);
        box-sizing: border-box;
        border-radius: 4px;

        padding: 40px 48px;

        position: relative;

        &:first-child {
            margin-right: 16px;
        }
    }

    .MergeEditor-previewContentTitle {
        margin: 0;
        position: absolute;
        right: 8px;
        top: 6px;

        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: center;

        color: rgba(64, 80, 166, 0.5);
    }
`;
const DownloadButton = styled.a `
    display: block;

    color: #272932;

    padding: 6px 12px;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    text-transform: capitalize;

    text-decoration: none;

    border: 1px solid #4050a6;
`;
const NestedListWrapper = styled.div `
    padding-left: 10px;
`;
const VariableSidebarContent = styled.div `
    flex: 1;
    overflow: auto;
`;
//# sourceMappingURL=XTextMerge.js.map