"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResponseViewer = exports.ResponseTab = void 0;
const tslib_1 = require("tslib");
require("prismjs/components/prism-graphql");
require("prismjs/components/prism-json");
const core_1 = require("@blueprintjs/core");
const json_1 = require("@stoplight/json");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const mobx_react_lite_1 = require("mobx-react-lite");
const React = tslib_1.__importStar(require("react"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const http_1 = require("../../../utils/http");
const TabTitle_1 = require("../TabTitle");
const Body_1 = require("./Body");
const Headers_1 = require("./Headers");
const panelClassName = 'bg-white dark:bg-transparent border-t';
var ResponseTab;
(function (ResponseTab) {
    ResponseTab["BODY"] = "body";
    ResponseTab["HEADERS"] = "headers";
    ResponseTab["ORIGINAL"] = "original";
})(ResponseTab = exports.ResponseTab || (exports.ResponseTab = {}));
const defaultTabs = [ResponseTab.BODY, ResponseTab.HEADERS, ResponseTab.ORIGINAL];
exports.ResponseViewer = mobx_react_lite_1.observer(({ tabs = defaultTabs, className }) => {
    const [selectedTabId, setSelectedTabId] = React.useState('response-body');
    const requestMakerStore = useRequestMaker_1.useRequestMakerStore();
    const responseStore = useRequestMaker_1.useRequestMakerStore('response');
    if (responseStore.statusCode === 0 && !requestMakerStore.isSending && !responseStore.error) {
        return null;
    }
    const color = http_1.getHttpCodeColor(responseStore.statusCode);
    return (React.createElement("div", { className: classnames_1.default('RequestMaker__ResponseViewer relative border-l border-r border-b bg-gray-1 dark:bg-transparent rounded-b', className) },
        requestMakerStore.isSending && (React.createElement("div", { className: "absolute inset-0 z-20 flex flex-col items-center justify-center bg-lighten-8" },
            React.createElement("div", { className: "text-lg font-medium" }, "Sending Request..."),
            React.createElement(core_1.Button, { className: "w-32 mt-5", onClick: () => requestMakerStore.cancel() }, "Cancel"))),
        React.createElement(core_1.Tabs, { id: "RequestMaker__ResponseViewer-tabs", className: "relative RequestMaker__ResponseViewer-tabs", selectedTabId: selectedTabId, onChange: (newTabId, prevTabId, e) => {
                e.preventDefault();
                e.stopPropagation();
                setSelectedTabId(String(newTabId));
            } },
            tabs.includes(ResponseTab.BODY) && (React.createElement(core_1.Tab, { id: "response-body", title: React.createElement(TabTitle_1.TabTitle, { title: "Response Body" }), panelClassName: panelClassName, panel: React.createElement(Body_1.ResponseBody, null) })),
            tabs.includes(ResponseTab.HEADERS) && (React.createElement(core_1.Tab, { id: "response-headers", title: React.createElement(TabTitle_1.TabTitle, { title: "Response Headers", count: lodash_1.keys(responseStore.headers).length }), panelClassName: panelClassName, panel: React.createElement(Headers_1.ResponseHeaders, null) })),
            tabs.includes(ResponseTab.ORIGINAL) && (React.createElement(core_1.Tab, { id: "response-original", title: React.createElement(TabTitle_1.TabTitle, { title: "Original Request" }), panelClassName: panelClassName, panel: React.createElement("div", { className: "RequestMaker__RequestViewer" },
                    React.createElement(ui_kit_1.CodeViewer, { language: "json", value: json_1.safeStringify(responseStore.originalRequest, undefined, 2), showLineNumbers: true, className: "p-5" })) })),
            React.createElement(core_1.Tabs.Expander, null),
            React.createElement("div", { className: "flex flex-wrap items-center py-1 text-sm" },
                responseStore.isMockedResponse && (React.createElement("div", { className: "flex mx-3" },
                    React.createElement(ui_kit_1.Tag, { intent: "success" }, "Mocked Response"))),
                React.createElement("div", { className: "flex mx-3" },
                    React.createElement("div", { className: "mr-2" }, "Status:"),
                    React.createElement("div", { className: `text-${color} whitespace-no-wrap` }, responseStore.statusText)),
                React.createElement("div", { className: "flex mx-3" },
                    React.createElement("div", { className: "mr-2" }, "Time:"),
                    React.createElement("div", { className: `text-${color}` },
                        responseStore.responseTime,
                        "ms"))))));
});
exports.ResponseViewer.displayName = 'RequestMaker.ResponseViewer';
//# sourceMappingURL=Viewer.js.map