"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditModal = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
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 EditModal = (props) => {
    const error = props.error;
    const [value, setValue] = (0, react_1.useState)(JSON.parse(props.value));
    const onChange = (newConf) => {
        // only update for valid jsObject
        let jsObject = Reflect.get(newConf, "jsObject");
        if (jsObject)
            setValue(jsObject);
    };
    return ((0, jsx_runtime_1.jsxs)(core_1.Dialog, { open: props.open, onClose: props.onClose, "aria-labelledby": "datadefinition-editor-json-modal", maxWidth: "lg", fullWidth: true, children: [(0, jsx_runtime_1.jsxs)(core_1.DialogTitle, { id: "datadefinition-editor-json-modal", children: [props.title ? props.title : `Edit JSON`, " ", error && (0, jsx_runtime_1.jsxs)(core_1.FormHelperText, { error: true, children: ["(", error, ")"] })] }), (0, jsx_runtime_1.jsx)(core_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(EditJsonDiv, { children: (0, jsx_runtime_1.jsx)(react_json_editor_ajrm_1.default, { placeholder: value, locale: JsonInputLocale_1.locale, theme: "light_mitsuketa_tribute", style: {
                            outerBox: {
                                width: "100%",
                            },
                            container: {
                                width: "100%",
                            },
                        }, onChange: onChange }) }) }), (0, jsx_runtime_1.jsxs)(core_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: props.onClose, color: "primary", children: "Cancel" }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => props.onEdit(value), color: "primary", children: "Update" })] })] }));
};
exports.EditModal = EditModal;
const EditJsonDiv = styled_components_1.default.div `
    .MuiInputBase-multiline {
        background: #1b1b1b;
        font-family: MyFancyCustomFont, monospace;
        font-size: inherit;
        color: #f5d67b;
    }
`;
//# sourceMappingURL=EditModal.js.map