"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Response = exports.Responses = exports.HttpCodeColor = void 0;
const tslib_1 = require("tslib");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const MarkdownViewer_1 = require("../../MarkdownViewer");
const SchemaViewer_1 = require("../../SchemaViewer");
const Parameters_1 = require("./Parameters");
const SectionTitle_1 = require("./SectionTitle");
const utils_1 = require("./utils");
exports.HttpCodeColor = {
    1: 'gray',
    2: 'green',
    3: 'yellow',
    4: 'orange',
    5: 'red',
};
exports.Responses = ({ className, responses }) => {
    const [activeResponse, setActiveResponse] = React.useState(0);
    if (!responses || !responses.length)
        return null;
    const sortedResponses = [...responses].sort();
    return (React.createElement("div", { className: classnames_1.default('HttpOperation__Responses', className) },
        React.createElement(SectionTitle_1.SectionTitle, { title: "Responses" }),
        React.createElement("div", { className: "flex" },
            React.createElement("div", null, sortedResponses.map((response, index) => {
                if (!response.code)
                    return null;
                const isActive = activeResponse === index;
                return (React.createElement("div", { key: response.code, className: classnames_1.default('py-3 pr-12 hover:bg-gray-1 dark-hover:bg-gray-7', {
                        'border-t border-gray-2 dark:border-gray-7': index > 0,
                        'cursor-pointer': !isActive,
                        'bg-gray-1 dark:bg-gray-7': isActive,
                    }), onClick: () => setActiveResponse(index) },
                    React.createElement(ui_kit_1.FAIcon, { icon: ['fas', 'circle'], className: "ml-4 mr-3", style: { color: exports.HttpCodeColor[String(response.code)[0]] } }),
                    response.code));
            })),
            React.createElement("div", { className: "flex-1 border-l dark:border-gray-6" },
                React.createElement(exports.Response, { response: sortedResponses[activeResponse] })))));
};
exports.Responses.displayName = 'HttpOperation.Responses';
exports.Response = ({ className, response }) => {
    if (!response || typeof response !== 'object')
        return null;
    const content = response.contents && response.contents[0];
    const examples = utils_1.getExamplesObject((content === null || content === void 0 ? void 0 : content.examples) || []);
    return (React.createElement("div", { className: classnames_1.default('HttpOperation__Response pt-6 pl-8', className) },
        React.createElement(MarkdownViewer_1.MarkdownViewer, { className: "ml-1 mb-6", markdown: response.description || '*No description.*' }),
        React.createElement(Parameters_1.Parameters, { className: "mb-6", title: "Headers", parameterType: "header", parameters: response.headers }),
        (content === null || content === void 0 ? void 0 : content.schema) && React.createElement(SchemaViewer_1.SchemaViewer, { schema: content.schema, examples: examples, forceShowTabs: true })));
};
exports.Response.displayName = 'HttpOperation.Response';
//# sourceMappingURL=Responses.js.map