"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Mocking = void 0;
const tslib_1 = require("tslib");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const mobx_react_lite_1 = require("mobx-react-lite");
const React = tslib_1.__importStar(require("react"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const notSetOption = { value: '', label: 'Not Set' };
const dynamicOptions = [
    { value: 'dynamic', label: 'Dynamic' },
    { value: 'static', label: 'Static' },
];
exports.Mocking = mobx_react_lite_1.observer(() => {
    const store = useRequestMaker_1.useRequestMakerStore();
    const requestStore = useRequestMaker_1.useRequestMakerStore('request');
    if (!store.operation)
        return React.createElement("div", null, "Mocking not available.");
    const operationResponses = store.operation.responses;
    const currentCode = (store.prismConfig.mock && store.prismConfig.mock.code) || '';
    const currentExample = (store.prismConfig.mock && store.prismConfig.mock.exampleKey) || '';
    const exampleOptions = React.useMemo(() => {
        const response = operationResponses === null || operationResponses === void 0 ? void 0 : operationResponses.find(r => r.code === currentCode);
        if (!response || !response.contents) {
            return [notSetOption];
        }
        const options = response.contents.flatMap(c => c.examples || []).map(e => ({ value: e.key, label: e.key }));
        return [notSetOption, ...options];
    }, [operationResponses, currentCode]);
    React.useEffect(() => {
        if (currentExample && !exampleOptions.find(o => o.value === currentExample)) {
            store.setPrismMockingOption('exampleKey', undefined);
        }
    }, [exampleOptions, currentExample, store]);
    const currentDynamicSetting = store.prismConfig.mock && store.prismConfig.mock.dynamic ? 'dynamic' : 'static';
    let responseText = 'Not Set';
    if (currentCode) {
        responseText = currentCode;
        if (currentExample) {
            responseText = `${currentCode} - ${currentExample}`;
        }
    }
    return (React.createElement("div", { className: "px-8 py-6" },
        React.createElement(ConfigurationRow, { title: "Mocking", description: React.createElement("div", null,
                React.createElement("div", null, "Enable mocking to send requests to a simulated API. You can choose to receive a specific response code and example or have one dynamically generated for you based on this operation's response schema."),
                React.createElement("div", { className: "mt-2" },
                    "For more information on mocking,",
                    ' ',
                    React.createElement("a", { href: "https://stoplight.io/p/docs/gh/stoplightio/prism/docs/guides/01-mocking.md" }, "check out the docs"))) },
            React.createElement(ui_kit_1.Popover, { interactionKind: 'hover', position: 'bottom-right', boundary: 'window', disabled: store.isMatchingOperation, content: React.createElement("div", { className: "p-3 w-80 text-center" },
                    React.createElement("div", { className: "text-red uppercase text-sm" }, "Unable to mock this request"),
                    React.createElement("div", { className: "pt-1" },
                        "Request method \"",
                        store.request.method,
                        "\" does not match operation method \"",
                        store.operation.method,
                        "\"")) },
                React.createElement(ui_kit_1.Switch, { className: "mx-8 mt-5", label: "Enable Mocking", checked: store.isMockEnabled, onChange: () => {
                        requestStore.shouldMock = !requestStore.shouldMock;
                    }, disabled: !store.isMatchingOperation }))),
        React.createElement("div", { className: "relative pt-6" },
            !store.isMockEnabled && React.createElement("div", { className: "absolute bg-lighten-9 dark:bg-darken-9 inset-0 z-10" }),
            React.createElement(ConfigurationRow, { title: "Response Code", description: React.createElement("div", null,
                    React.createElement("div", null,
                        "By default, an appropriate response will be returned based on the request input. If you would like to receive a specific response, you can choose one of the defined codes and examples using the dropdown to the right and a ",
                        React.createElement("code", null, "Prefer"),
                        " header will be configured for you.")) },
                React.createElement(ui_kit_1.Popover, { autoFocus: false, content: React.createElement(ui_kit_1.Menu, null,
                        React.createElement(ui_kit_1.MenuItem, { active: !currentCode, text: "Not Set", onClick: () => {
                                store.setPrismMockingOption('code', undefined);
                                store.setPrismMockingOption('exampleKey', undefined);
                            } }), operationResponses === null || operationResponses === void 0 ? void 0 :
                        operationResponses.map(operationResponse => {
                            var _a;
                            const isActive = operationResponse.code === currentCode;
                            const exampleKeys = (_a = operationResponse.contents) === null || _a === void 0 ? void 0 : _a.flatMap(c => c.examples || []).map(example => example.key);
                            const exampleChildren = exampleKeys === null || exampleKeys === void 0 ? void 0 : exampleKeys.map(exampleKey => (React.createElement(ui_kit_1.MenuItem, { active: isActive && exampleKey === currentExample, text: exampleKey, key: exampleKey, onClick: () => {
                                    store.setPrismMockingOption('code', operationResponse.code);
                                    store.setPrismMockingOption('exampleKey', exampleKey);
                                } })));
                            if (exampleKeys === null || exampleKeys === void 0 ? void 0 : exampleKeys.length) {
                                exampleChildren === null || exampleChildren === void 0 ? void 0 : exampleChildren.unshift(React.createElement(ui_kit_1.MenuItem, { key: "no-example", active: isActive && !currentExample, text: "No Example", onClick: () => {
                                        store.setPrismMockingOption('code', operationResponse.code);
                                        store.setPrismMockingOption('exampleKey', undefined);
                                    } }), React.createElement(ui_kit_1.MenuDivider, { key: "divider" }));
                            }
                            return (React.createElement(ui_kit_1.MenuItem, { active: isActive, text: operationResponse.code, key: operationResponse.code, onClick: () => {
                                    store.setPrismMockingOption('code', operationResponse.code);
                                    store.setPrismMockingOption('exampleKey', undefined);
                                } }, exampleChildren));
                        })), position: ui_kit_1.Position.BOTTOM, boundary: "window", minimal: true },
                    React.createElement(ui_kit_1.Button, { rightIcon: "double-caret-vertical", disabled: !store.isMockEnabled, text: responseText }))),
            React.createElement(ConfigurationRow, { className: "pt-6", title: "Response Generation", description: React.createElement("div", null,
                    React.createElement("div", null,
                        "By default, mocked responses are statically generated. If you would like to receive a dynamically generated response, you can choose the ",
                        React.createElement("code", null, "dynamic"),
                        " option using the dropdown to the right and a",
                        ' ',
                        React.createElement("code", null, "Prefer"),
                        " headed will be configured for you.")) },
                React.createElement(ui_kit_1.HTMLSelect, { className: "dynamic-mode-selector", disabled: !store.isMockEnabled, options: dynamicOptions, onChange: event => {
                        store.setPrismMockingOption('dynamic', event.currentTarget.value === 'dynamic');
                    }, value: currentDynamicSetting })))));
});
const ConfigurationRow = ({ className, title, description, children }) => (React.createElement("div", { className: classnames_1.default('flex', className) },
    React.createElement("div", { className: "w-2/3" },
        React.createElement("div", { className: "font-bold" }, title),
        React.createElement("div", { className: "pt-4" }, description)),
    React.createElement("div", { className: "mx-auto" }, children)));
//# sourceMappingURL=Mocking.js.map