"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResponseBody = void 0;
const tslib_1 = require("tslib");
const core_1 = require("@blueprintjs/core");
const markdown_viewer_1 = require("@stoplight/markdown-viewer");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Array_1 = require("fp-ts/lib/Array");
const mobx_react_lite_1 = require("mobx-react-lite");
const React = tslib_1.__importStar(require("react"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const ErrorViewer_1 = require("./ErrorViewer");
const HTMLViewer_1 = require("./HTMLViewer");
const ImageViewer_1 = require("./ImageViewer");
const JsonViewer_1 = require("./JsonViewer");
const PrettyViewer_1 = require("./PrettyViewer");
const RawViewer_1 = require("./RawViewer");
const ViolationsDisplay_1 = require("./ViolationsDisplay");
exports.ResponseBody = mobx_react_lite_1.observer(({ className }) => {
    const { body, error, responseType, bodyJson, violations } = useRequestMaker_1.useRequestMakerStore('response');
    const [selectedView, setSelectedView] = React.useState(responseType === 'img' ? 'rendered' : 'pretty');
    React.useEffect(() => {
        if (responseType === 'img') {
            setSelectedView('rendered');
        }
    }, [body, responseType]);
    let content;
    if (error) {
        content = React.createElement(ErrorViewer_1.ErrorViewer, { error: error });
    }
    else if (selectedView === 'rendered') {
        switch (responseType) {
            case 'json':
                content = React.createElement(JsonViewer_1.JsonViewer, { node: bodyJson, expandedDepth: 2 });
                break;
            case 'html':
                content = React.createElement(HTMLViewer_1.HTMLViewer, { srcDoc: body });
                break;
            case 'md':
                content = React.createElement(markdown_viewer_1.MarkdownViewer, { className: "m-4", markdown: body });
                break;
            case 'img':
                content = React.createElement(ImageViewer_1.ImageViewer, { dataUri: body });
                break;
            default:
                content = React.createElement("div", { className: "p-10 text-center text-gray-6" },
                    responseType || 'Response type',
                    " not supported");
                break;
        }
    }
    else if (responseType === 'img') {
        content = (React.createElement("div", { className: "p-10 text-center text-gray-6" },
            "This request has no raw data available. Try the",
            ' ',
            React.createElement("span", { className: "underline cursor-pointer text-blue", onClick: () => setSelectedView('rendered') }, "rendered view"),
            "."));
    }
    else if (selectedView === 'pretty') {
        content = React.createElement(PrettyViewer_1.PrettyViewer, { response: error || body, type: responseType });
    }
    else {
        content = React.createElement(RawViewer_1.RawViewer, { content: body, type: responseType });
    }
    const onChange = React.useCallback(e => setSelectedView(e.currentTarget.value), []);
    const bodyViolations = violations.filter(v => v.path && v.path[0] === 'body');
    const shouldShowViewSelector = !error;
    return (React.createElement("div", { className: classnames_1.default(className, 'RequestMaker__ResponseBody flex flex-col') },
        shouldShowViewSelector && React.createElement(ViewSelectorRadioGroup, { selectedView: selectedView, onChange: onChange }),
        Array_1.isNonEmpty(bodyViolations) && React.createElement(ViolationsDisplay_1.ViolationsDisplay, { violations: bodyViolations }),
        React.createElement("div", { className: "flex-1 border-t RequestMaker__ResponseBody--content" }, content)));
});
exports.ResponseBody.displayName = 'RequestMaker.ResponseBody';
const ViewSelectorRadioGroup = ({ onChange, selectedView }) => (React.createElement(core_1.RadioGroup, { className: "mx-5 mt-3 RequestMaker__ResponseBody--type", inline: true, onChange: onChange, selectedValue: selectedView },
    React.createElement(core_1.Radio, { label: "raw", value: "raw" }),
    React.createElement(core_1.Radio, { label: "pretty", value: "pretty" }),
    React.createElement(core_1.Radio, { label: "rendered", value: "rendered" })));
//# sourceMappingURL=Body.js.map