"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RequestBody = void 0;
const tslib_1 = require("tslib");
const json_1 = require("@stoplight/json");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const mobx_1 = require("mobx");
const mobx_react_lite_1 = require("mobx-react-lite");
const React = tslib_1.__importStar(require("react"));
const typeis = tslib_1.__importStar(require("type-is"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const useSuggestion_1 = require("../../../hooks/useSuggestion");
const SuggestionBar_1 = require("../SuggestionBar");
const Parameters_1 = require("./Parameters");
exports.RequestBody = mobx_react_lite_1.observer(({ className }) => {
    const request = useRequestMaker_1.useRequestMakerStore('request');
    const onChange = React.useCallback(e => {
        request.contentType = e.currentTarget.value;
    }, [request]);
    let content = React.createElement("div", { className: "text-center p-10 text-gray-6 flex-1" }, "This request does not have a body");
    if (request.contentType === 'raw') {
        content = (React.createElement("div", { className: "RequestMaker__RequestBody--raw flex flex-1" },
            React.createElement(ui_kit_1.CodeEditor, { className: "m-5 flex-1", language: "json", value: request.body, onChange: value => {
                    request.body = value;
                }, padding: 0, showLineNumbers: true })));
    }
    else if (request.contentType === 'binary') {
        content = (React.createElement("div", { className: "RequestMaker__RequestBody--binary mx-5 my-3 flex-1" },
            React.createElement(ui_kit_1.FileInput, { text: request.formDataParams.length ? request.formDataParams[0].name : 'Choose file...', onInputChange: e => {
                    const files = e.currentTarget.files;
                    if (files && files.length) {
                        const formDataParams = [];
                        for (let i = 0; i < files.length; i++) {
                            formDataParams.push({
                                name: files[i].name,
                                value: files[i],
                                type: files[i].type,
                                isEnabled: true,
                            });
                        }
                        request.formDataParams = formDataParams;
                    }
                    else {
                        request.formDataParams = [];
                    }
                }, inputProps: {
                    multiple: true,
                } })));
    }
    else if (request.contentType === 'graphql') {
        content = (React.createElement("div", { className: "RequestMaker__RequestBody--graphql flex flex-1" },
            React.createElement("div", { className: "flex-1" },
                React.createElement("div", { className: "px-3 pt-3 bp3-text-muted text-sm text-right" }, "QUERY"),
                React.createElement(ui_kit_1.CodeEditor, { className: "m-5", language: "graphql", value: request.graphqlQuery, onChange: mobx_1.action((value) => {
                        request.graphqlQuery = value;
                    }), padding: 0, showLineNumbers: true })),
            React.createElement("div", { className: "border-l" }),
            React.createElement("div", { className: "flex-1" },
                React.createElement("div", { className: "px-3 pt-3 bp3-text-muted text-sm text-right" }, "VARIABLES"),
                React.createElement(ui_kit_1.CodeEditor, { className: "m-5", language: "json", value: request.graphqlVariables, onChange: mobx_1.action((value) => {
                        request.graphqlVariables = value;
                    }), padding: 0, showLineNumbers: true }))));
    }
    else if (request.contentType === 'form-data') {
        content = React.createElement(Parameters_1.RequestParameters, { className: "flex-1", type: "formData" });
    }
    else if (request.contentType === 'x-www-form-urlencoded') {
        content = React.createElement(Parameters_1.RequestParameters, { className: "flex-1", type: "urlEncoded" });
    }
    return (React.createElement("div", { className: classnames_1.default('RequestMaker__RequestBody flex flex-col', className) },
        React.createElement(ui_kit_1.RadioGroup, { className: "RequestMaker__RequestBody--type mx-5 mt-3", inline: true, onChange: onChange, selectedValue: request.contentType },
            React.createElement(ui_kit_1.Radio, { label: "none", value: "none" }),
            React.createElement(ui_kit_1.Radio, { label: "raw", value: "raw" }),
            React.createElement(ui_kit_1.Radio, { label: "x-www-form-urlencoded", value: "x-www-form-urlencoded" }),
            React.createElement(ui_kit_1.Radio, { label: "form-data", value: "form-data" }),
            React.createElement(ui_kit_1.Radio, { label: "binary", value: "binary" }),
            React.createElement(ui_kit_1.Radio, { label: "graphql", value: "graphql" })),
        React.createElement(SuggestionBar_1.SuggestionBar, { suggestions: suggestions }),
        React.createElement("div", { className: `RequestMaker__RequestBody--content RequestMaker__RequestBody--${request.contentType} flex flex-1 border-t` }, content)));
});
exports.RequestBody.displayName = 'RequestMaker.RequestBody';
const suggestions = [
    store => {
        if (store.request.contentType !== 'none' || !store.request.activeContentTypeHeader) {
            return undefined;
        }
        const resolution = () => {
            store.request.disableAllContentTypeHeaders();
        };
        return (React.createElement("div", { className: "flex items-center" },
            "A request with no body should not have a ",
            React.createElement("em", null, "Content-Type"),
            " header set.",
            React.createElement(ui_kit_1.Button, { minimal: true, intent: "primary", className: "ml-2", rightIcon: "tick", onClick: resolution },
                "Disable ",
                React.createElement("em", null, "Content-Type"),
                " headers.")));
    },
    useSuggestion_1.createContentTypeSuggestion(store => {
        const requestStore = store.request;
        if (requestStore.contentType !== 'raw') {
            return false;
        }
        const currentContentType = requestStore.activeContentTypeHeader;
        const parsedBody = json_1.safeParse(requestStore.body);
        if (!parsedBody || !(typeof parsedBody === 'object')) {
            return false;
        }
        if (!currentContentType ||
            !currentContentType.value ||
            !typeis.is(currentContentType.value, ['application/json', 'application/*+json'])) {
            return true;
        }
        return false;
    }, 'application/json', resolution => (React.createElement("div", { className: "flex items-center" },
        "Content is a valid JSON object, but the Content-Type header is not set.",
        React.createElement(ui_kit_1.Button, { minimal: true, intent: "primary", className: "ml-2", rightIcon: "tick", onClick: resolution },
            "Set ",
            React.createElement("em", null, "Content-Type: application/json"))))),
    useSuggestion_1.createContentTypeSuggestion(store => {
        var _a;
        if (store.request.contentType !== 'x-www-form-urlencoded') {
            return false;
        }
        return ((_a = store.request.activeContentTypeHeader) === null || _a === void 0 ? void 0 : _a.value) !== 'application/x-www-form-urlencoded';
    }, 'application/x-www-form-urlencoded', resolution => (React.createElement("div", { className: "flex items-center" },
        "Content-Type header is not set to 'application/x-www-form-urlencoded'.",
        React.createElement(ui_kit_1.Button, { minimal: true, intent: "primary", className: "ml-2", rightIcon: "tick", onClick: resolution },
            "Set ",
            React.createElement("em", null, "Content-Type"),
            " header")))),
    useSuggestion_1.createContentTypeSuggestion(store => {
        var _a;
        if (store.request.contentType !== 'form-data') {
            return false;
        }
        return ((_a = store.request.activeContentTypeHeader) === null || _a === void 0 ? void 0 : _a.value) !== 'multipart/form-data';
    }, 'multipart/form-data', resolution => (React.createElement("div", { className: "flex items-center" },
        "Content-Type header is not set to 'multipart/form-data'.",
        React.createElement(ui_kit_1.Button, { minimal: true, intent: "primary", className: "ml-2", rightIcon: "tick", onClick: resolution },
            "Set ",
            React.createElement("em", null, "Content-Type"),
            " header")))),
];
//# sourceMappingURL=Body.js.map