"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.addEntity = exports.getEntityRange = exports.valueEditorPlugin = exports.ValueEditorRenderEntity = exports.ValueEditorRender = exports.ValueEditorRenderStrategy = exports.tempVariableRenderPlugin = exports.variableRenderPlugin = exports.VariableRenderEntity = exports.VariableRender = exports.VariableRenderStrategy = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const draft_js_1 = require("draft-js");
const DataEditing_1 = require("../../CommonUI/DataEditing");
const TestContext_1 = require("../../CommonUI/Testing/TestContext");
const TestingConstants_1 = require("../../CommonUI/Testing/TestingConstants");
const core_1 = require("@material-ui/core");
const AttentionIcon_1 = require("../../CommonUI/Icon/AttentionIcon");
const TextMergeConstants_1 = require("@appglue/common/dist/TextMerge/TextMergeConstants");
const UndefinedDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/UndefinedDataDefinition");
const VariableRenderStrategy = (contentBlock, callback, contentState) => {
    contentBlock.findEntityRanges((character) => {
        const entityKey = character.getEntity();
        return (entityKey !== null &&
            contentState.getEntity(entityKey).getType() === TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE);
    }, callback);
};
exports.VariableRenderStrategy = VariableRenderStrategy;
const VariableRender = (props) => {
    return (0, jsx_runtime_1.jsx)(exports.VariableRenderEntity, { ...props });
};
exports.VariableRender = VariableRender;
const VariableRenderEntity = (props) => {
    const { entityKey, contentState } = props;
    const { fieldpath, showModalWithEntity, isValidField } = contentState.getEntity(entityKey).getData();
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const isvalid = isValidField(fieldpath);
    const onClick = () => {
        showModalWithEntity(entityKey);
    };
    if (testContext) {
        const testitem = testContext.findItem(fieldpath);
        if (!testitem || testitem?.isError) {
            return ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: testitem?.result || "", children: (0, jsx_runtime_1.jsxs)("span", { style: {
                        borderRadius: 5,
                        background: TestingConstants_1.TestingConstants.BACKGROUND_FAIL,
                        position: "relative",
                    }, children: [props.children, " ", fieldpath, " \u00A0", (0, jsx_runtime_1.jsx)("span", { style: { position: "absolute", bottom: 0, right: 0 }, children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) })] }) }));
        }
        return ((0, jsx_runtime_1.jsxs)("span", { style: {
                borderRadius: 5,
                background: TestingConstants_1.TestingConstants.BACKGROUND_SUCCESS,
                position: "relative",
            }, children: [props.children, " ", fieldpath, " \u00A0", (0, jsx_runtime_1.jsx)("span", { style: {
                        position: "absolute",
                        top: "100%",
                        right: 0,
                        color: TestingConstants_1.TestingConstants.TEXT_SUCCESS,
                        fontSize: 8,
                    }, children: testitem.result })] }));
    }
    return ((0, jsx_runtime_1.jsxs)("span", { onMouseDown: onClick, style: {
            borderRadius: 5,
            background: isvalid ? "#e0e0e0" : "red",
        }, children: [props.children, " ", fieldpath, " \u00A0"] }));
};
exports.VariableRenderEntity = VariableRenderEntity;
exports.variableRenderPlugin = {
    decorators: [
        {
            strategy: exports.VariableRenderStrategy,
            component: exports.VariableRender,
        },
    ],
};
const TempVariableRenderStrategy = (contentBlock, callback, contentState) => {
    contentBlock.findEntityRanges((character) => {
        const entityKey = character.getEntity();
        return (entityKey !== null &&
            contentState.getEntity(entityKey).getType() === TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_TEMP_ENTITY_TYPE);
    }, callback);
};
const TempVariableRenderEntity = (props) => {
    const { entityKey, contentState } = props;
    const { fieldpath } = contentState.getEntity(entityKey).getData();
    return ((0, jsx_runtime_1.jsxs)("span", { style: {
            borderRadius: 5,
            border: "dotted 1px #777",
            color: "#777",
        }, children: [props.children, " ", fieldpath, " \u00A0"] }));
};
const TempVariableRender = (props) => {
    return (0, jsx_runtime_1.jsx)(TempVariableRenderEntity, { ...props });
};
exports.tempVariableRenderPlugin = {
    decorators: [
        {
            strategy: TempVariableRenderStrategy,
            component: TempVariableRender,
        },
    ],
};
const ValueEditorRenderStrategy = (contentBlock, callback, contentState) => {
    contentBlock.findEntityRanges((character) => {
        const entityKey = character.getEntity();
        return (entityKey !== null &&
            contentState.getEntity(entityKey).getType() === TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE);
    }, callback);
};
exports.ValueEditorRenderStrategy = ValueEditorRenderStrategy;
const ValueEditorRender = (props) => {
    // const { elementType } = props.contentState.getEntity(props.entityKey).getData();
    return (0, jsx_runtime_1.jsx)(exports.ValueEditorRenderEntity, { ...props });
};
exports.ValueEditorRender = ValueEditorRender;
const ValueEditorRenderEntity = (props) => {
    const { entityKey, contentState } = props;
    const { field, value, onUpdateValue, fieldpath } = contentState.getEntity(entityKey).getData();
    const onUpdate = (newValue) => {
        onUpdateValue(fieldpath, newValue);
    };
    return ((0, jsx_runtime_1.jsx)("div", { style: { display: "inline-block" }, children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: field || new UndefinedDataDefinition_1.UndefinedDataDefinition(), onUpdate: onUpdate, mode: "edit_mode", value: value }) }));
};
exports.ValueEditorRenderEntity = ValueEditorRenderEntity;
exports.valueEditorPlugin = {
    decorators: [
        {
            strategy: exports.ValueEditorRenderStrategy,
            component: exports.ValueEditorRender,
        },
    ],
};
const getEntityRange = (editorState, entityKey) => {
    const selection = editorState.getSelection();
    const currentContent = editorState.getCurrentContent();
    const startKey = selection.getStartKey();
    let block = currentContent.getBlockForKey(startKey);
    let range;
    block.findEntityRanges((character) => {
        const key = character.getEntity();
        return key !== null && entityKey === key;
    }, (start, end) => {
        range = {
            start,
            end,
        };
    });
    return range;
};
exports.getEntityRange = getEntityRange;
// HTML
const addEntity = (editorState, entityType, text, data) => {
    let selection = editorState.getSelection();
    let blockKey = selection.getAnchorKey();
    let block = editorState.getCurrentContent().getBlockForKey(blockKey);
    const currentEntity = block.getEntityAt(selection.getAnchorOffset());
    if (currentEntity) {
        const entityRange = (0, exports.getEntityRange)(editorState, currentEntity);
        if (entityRange) {
            const isBackward = selection.getIsBackward();
            if (isBackward) {
                selection = selection.merge({
                    anchorOffset: entityRange.end,
                    focusOffset: entityRange.start,
                });
            }
            else {
                selection = selection.merge({
                    anchorOffset: entityRange.start,
                    focusOffset: entityRange.end,
                });
            }
        }
    }
    const entityKey = editorState
        .getCurrentContent()
        .createEntity(entityType, "IMMUTABLE", data)
        .getLastCreatedEntityKey();
    let contentState = draft_js_1.Modifier.replaceText(editorState.getCurrentContent(), selection, `${text}`, editorState.getCurrentInlineStyle(), entityKey);
    let newEditorState = draft_js_1.EditorState.push(editorState, contentState, "insert-characters");
    // insert a blank space after link
    selection = newEditorState.getSelection().merge({
        anchorOffset: selection.get("anchorOffset") + text.length,
        focusOffset: selection.get("anchorOffset") + text.length,
    });
    newEditorState = draft_js_1.EditorState.acceptSelection(newEditorState, selection);
    contentState = draft_js_1.Modifier.insertText(newEditorState.getCurrentContent(), selection, "", newEditorState.getCurrentInlineStyle(), undefined);
    return [draft_js_1.EditorState.push(newEditorState, contentState, "insert-characters"), entityKey];
};
exports.addEntity = addEntity;
//# sourceMappingURL=TextMergeCommon.js.map