"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SchemaViewer = void 0;
const tslib_1 = require("tslib");
const core_1 = require("@blueprintjs/core");
const json_1 = require("@stoplight/json");
const json_schema_viewer_1 = require("@stoplight/json-schema-viewer");
const markdown_viewer_1 = require("@stoplight/markdown-viewer");
const CodeViewer_1 = require("@stoplight/ui-kit/CodeViewer");
const SimpleTabs_1 = require("@stoplight/ui-kit/SimpleTabs");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const React = tslib_1.__importStar(require("react"));
const constants_1 = require("../../constants");
const Provider_1 = require("../../containers/Provider");
const MarkdownViewer_1 = require("../MarkdownViewer");
const JSV_MAX_ROWS = 20;
exports.SchemaViewer = ({ className, title, description, schema, examples, errors, maxRows = JSV_MAX_ROWS, forceShowTabs, }) => {
    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const resolveRef = React.useContext(Provider_1.InlineRefResolverContext);
    const JSV = ({ jsvClassName }) => {
        return (React.createElement(React.Fragment, null,
            React.createElement(SchemaTitle, { title: title, errors: errors }),
            description && React.createElement(MarkdownViewer_1.MarkdownViewer, { markdown: description }),
            React.createElement(json_schema_viewer_1.JsonSchemaViewer, { mergeAllOf: true, resolveRef: resolveRef, className: jsvClassName, schema: schema, maxRows: maxRows, shouldResolveEagerly: true })));
    };
    if (lodash_1.isEmpty(examples) && !forceShowTabs) {
        return React.createElement(JSV, { jsvClassName: classnames_1.default(className, 'dark:border-gray-9', markdown_viewer_1.CLASSNAMES.bordered, markdown_viewer_1.CLASSNAMES.block) });
    }
    return (React.createElement(SimpleTabs_1.SimpleTabs, { className: classnames_1.default('SchemaViewer', className), selectedIndex: selectedIndex, onSelect: setSelectedIndex, forceRenderTabPanel: true },
        React.createElement(SimpleTabs_1.SimpleTabList, null,
            React.createElement(SimpleTabs_1.SimpleTab, null, "Schema"),
            lodash_1.map(examples, (_, key) => (React.createElement(SimpleTabs_1.SimpleTab, { key: key }, key)))),
        React.createElement(SimpleTabs_1.SimpleTabPanel, { className: "p-0" }, React.createElement(JSV, null)),
        lodash_1.map(examples, (example, key) => {
            return (React.createElement(SimpleTabs_1.SimpleTabPanel, { key: key, className: "p-0" },
                React.createElement(CodeViewer_1.CodeViewer, { language: "json", showLineNumbers: true, className: "py-4 px-4 overflow-auto max-h-400px", value: json_1.safeStringify(example, undefined, 2) })));
        })));
};
const SchemaTitle = ({ title, errors }) => {
    const hasErrors = errors && errors.length;
    if (!title && !hasErrors) {
        return null;
    }
    return (React.createElement("div", { className: classnames_1.default('flex items-center p-2'), style: { height: 30 } },
        title && (React.createElement("div", { className: "flex items-center flex-1" },
            React.createElement(core_1.Icon, { icon: constants_1.NodeTypeIcons['model'], color: constants_1.NodeTypeColors['model'], iconSize: 14 }),
            React.createElement("div", { className: classnames_1.default(core_1.Classes.TEXT_MUTED, 'px-2'), style: { fontSize: 12 } }, title))),
        React.createElement("div", { className: "flex-1" }),
        errors && React.createElement(Errors, { errors: errors })));
};
const Errors = ({ errors }) => {
    if (!errors || !errors.length) {
        return null;
    }
    return (React.createElement(core_1.Popover, { interactionKind: core_1.PopoverInteractionKind.HOVER, target: React.createElement(core_1.Tag, { intent: core_1.Intent.DANGER },
            errors.length,
            " Error",
            errors.length > 1 && 's'), content: React.createElement("div", { className: classnames_1.default('p-6 max-w-md break-all', {
                'list-none': errors.length === 1,
            }) }, errors.map((error, index) => {
            return (React.createElement("li", { key: index, className: index > 1 ? 'mt-3' : '' }, error));
        })) }));
};
//# sourceMappingURL=index.js.map