"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SchemaUIComponent = 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 DataDefinition_1 = require("@appglue/common/dist/Common/Data/DataDefinition");
const react_json_editor_ajrm_1 = tslib_1.__importDefault(require("react-json-editor-ajrm"));
const JsonInputLocale_1 = require("@appglue/common/dist/Common/JsonInputLocale");
const core_1 = require("@material-ui/core");
const EditModal_1 = require("./EditModal");
const EditIcon_1 = require("../../Icon/EditIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const CompareChangesLayer_1 = require("./CompareChangesLayer");
const SchemaUIComponent = (props) => {
    const [openSchemaModal, setOpenSchemaModal] = (0, react_1.useState)(false);
    const [dataChanges, setDataChanges] = (0, react_1.useState)([]);
    const [updatedDef, setUpdatedDef] = (0, react_1.useState)();
    const [applyError, setApplyError] = (0, react_1.useState)();
    const onToggleSchemaModal = () => {
        setOpenSchemaModal(!openSchemaModal);
    };
    const onApply = () => {
        if (!updatedDef) {
            onCancel();
            return;
        }
        props.definition.fields = updatedDef.fields;
        StateManager_1.StateManager.changed(props.definition);
        setDataChanges([]);
        setUpdatedDef(undefined);
        setOpenSchemaModal(false);
    };
    const onCancel = () => {
        setDataChanges([]);
        setUpdatedDef(undefined);
        setOpenSchemaModal(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: onToggleSchemaModal, children: "Edit JSON Schema" }) }), (0, jsx_runtime_1.jsx)(react_json_editor_ajrm_1.default, { placeholder: JSON.parse(props.definition.toJSONSchema()), 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: openSchemaModal, value: props.definition.toJSONSchema(), title: "Edit JSON Schema", error: applyError, onEdit: (value) => {
                    try {
                        let json = value;
                        let odef = ObjectDataDefinition_1.ObjectDataDefinition.fromJSONSchema(json);
                        if (!odef) {
                            throw new Error("invalid schema");
                        }
                        let changes = props.definition.detectDataStructureChanges(odef.fields);
                        if (changes.length > 0) {
                            let tempDef = new DataDefinition_1.DataDefinition();
                            tempDef.fields = odef.fields;
                            setUpdatedDef(tempDef);
                            setDataChanges([...changes]);
                        }
                        else {
                            setOpenSchemaModal(false);
                        }
                    }
                    catch (error) {
                        setApplyError(error.message);
                    }
                }, onClose: () => setOpenSchemaModal(false) }), dataChanges.length > 0 && ((0, jsx_runtime_1.jsx)(CompareChangesLayer_1.CompareChangesLayer, { title: "Schema Changes Compare", oldValue: props.definition.toStructureString(0), newValue: updatedDef.toStructureString(0), onApply: onApply, onCancel: onCancel }))] }));
};
exports.SchemaUIComponent = SchemaUIComponent;
const EditorTools = styled_components_1.default.div `
    margin-bottom: 15px;
`;
//# sourceMappingURL=SchemaUIComponent.js.map