"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const jsoneditor_1 = __importDefault(require("jsoneditor"));
const lodash_1 = __importDefault(require("lodash"));
const styled_components_1 = __importDefault(require("styled-components"));
require("jsoneditor/dist/jsoneditor.min.css");
const Root = styled_components_1.default.div `
  height: 100%;
  width: 100%;
  .jsoneditor {
    border: none;
    &.jsoneditor-mode-preview {
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      padding: 4px;
      background: #f5f5f5;
      .jsoneditor-preview {
        color: rgba(0, 0, 0, 0.25);
      }
    }
    .jsoneditor-tree {
      overflow: hidden;
    }
    .jsoneditor-menu {
      background-color: #ebebeb;
      border-bottom: #c9c9c9;
      .jsoneditor-poweredBy {
        display: none;
      }
    }
  }
`;
const JsonEditor = (props, forwardedRef) => {
    const { options, jsonData, refreshFlag, disabled, readOnly, onChangeJSON = (_data) => { }, onError = () => { }, } = props;
    const container = (0, react_1.useRef)(null);
    const jsoneditor = (0, react_1.useRef)(null);
    const defaultOptions = {
        mode: disabled ? 'preview' : 'code',
        // modes: ['text', 'code', 'view', 'tree', 'form', 'preview'],
        mainMenuBar: false,
        statusBar: false,
        history: false,
        sortObjectKeys: true,
        navigationBar: false,
        onChange: () => {
            if (jsoneditor.current) {
                try {
                    onChangeJSON(jsoneditor.current.get());
                }
                catch (e) {
                    onError();
                }
            }
        },
    };
    (0, react_1.useEffect)(() => {
        if (container.current) {
            const newOptions = lodash_1.default.assign({}, defaultOptions, options);
            if (readOnly) {
                newOptions.onEditable = (node) => !!node.path;
            }
            jsoneditor.current = new jsoneditor_1.default(container.current, newOptions);
            jsoneditor.current.set(jsonData);
            if (newOptions.mode && ['tree', 'view', 'form'].indexOf(newOptions.mode) > -1) {
                jsoneditor.current.expandAll();
            }
        }
        return () => {
            jsoneditor.current.destroy();
        };
    }, [refreshFlag, disabled]);
    (0, react_1.useImperativeHandle)(forwardedRef, () => {
        var _a;
        return ({
            getText: (_a = jsoneditor.current) === null || _a === void 0 ? void 0 : _a.getText,
        });
    });
    return react_1.default.createElement(Root, { ref: container });
};
exports.default = (0, react_1.forwardRef)(JsonEditor);
