"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JSONUIComponent = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const react_json_editor_ajrm_1 = tslib_1.__importDefault(require("react-json-editor-ajrm"));
const JsonInputLocale_1 = require("@appglue/common/dist/Common/JsonInputLocale");
const DataDefinition_1 = require("@appglue/common/dist/Common/Data/DataDefinition");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const core_1 = require("@material-ui/core");
const EditModal_1 = require("./EditModal");
const EditIcon_1 = require("../../Icon/EditIcon");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const CompareChangesLayer_1 = require("./CompareChangesLayer");
const JSONUIComponent = (props) => {
    const [openJSONModal, setOpenJSONModal] = (0, react_1.useState)(false);
    const [applyError, setApplyError] = (0, react_1.useState)();
    const [dataChanges, setDataChanges] = (0, react_1.useState)([]);
    const [updatedDef, setUpdatedDef] = (0, react_1.useState)();
    const onToggleJSONModal = () => {
        setOpenJSONModal(!openJSONModal);
    };
    const onCancel = () => {
        setDataChanges([]);
        setUpdatedDef(undefined);
        setOpenJSONModal(false);
    };
    const onApply = () => {
        if (!updatedDef) {
            onCancel();
            return;
        }
        props.definition.fields = updatedDef.fields;
        props.definition.value = updatedDef.value;
        StateManager_1.StateManager.changed(props.definition);
        setDataChanges([]);
        setUpdatedDef(undefined);
        setOpenJSONModal(false);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditorTools, { children: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(EditIcon_1.EditIcon, {}), onClick: onToggleJSONModal, children: "Edit JSON" }) }), (0, jsx_runtime_1.jsx)(react_json_editor_ajrm_1.default, { placeholder: JSON.parse(props.definition.toJSONObject()), locale: JsonInputLocale_1.locale, theme: "light_mitsuketa_tribute", style: {
                    outerBox: {
                        width: "100%",
                    },
                    container: {
                        width: "100%",
                    },
                }, viewOnly: true }), (0, jsx_runtime_1.jsx)(EditModal_1.EditModal, { open: openJSONModal, value: props.definition.toJSONObject(), error: applyError, onEdit: (value) => {
                    setApplyError(undefined);
                    try {
                        props.definition.applyOwner();
                        let tempDef = new DataDefinition_1.DataDefinition();
                        tempDef.fromJSONObject(value);
                        let changes = props.definition.detectDataStructureChanges(tempDef.fields, true);
                        if (changes.length > 0) {
                            setDataChanges(changes);
                            setUpdatedDef(tempDef);
                        }
                        else if (!DataUtilities_1.DataUtilities.compare(value, JSON.parse(props.definition.toJSONObject()))) {
                            props.definition.value = value;
                            setUpdatedDef(undefined);
                            setOpenJSONModal(false);
                        }
                        else {
                            setOpenJSONModal(false);
                        }
                    }
                    catch (error) {
                        setApplyError(error.message);
                    }
                }, onClose: () => setOpenJSONModal(false) }), dataChanges.length > 0 && ((0, jsx_runtime_1.jsx)(CompareChangesLayer_1.CompareChangesLayer, { title: "JSON Object Structure Compare", oldValue: props.definition.toStructureString(0), newValue: updatedDef.toStructureString(0), onApply: onApply, onCancel: onCancel }))] }));
};
exports.JSONUIComponent = JSONUIComponent;
const EditorTools = styled_components_1.default.div `
    margin-bottom: 15px;
`;
//# sourceMappingURL=JSONUIComponent.js.map