"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RequestParameters = void 0;
const tslib_1 = require("tslib");
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");
exports.RequestParameters = mobx_react_lite_1.observer(({ type, className, suggestRenderer }) => {
    const [inFocus, setInFocus] = React.useState({ prop: 'name', index: -1 });
    const requestStore = useRequestMaker_1.useRequestMakerStore('request');
    const parameters = requestStore[`${type}Params`];
    const handlerPropChange = React.useCallback((prop, index, value) => {
        requestStore.setParam(type, index, prop, value);
    }, [requestStore, type]);
    const handleRemoveParam = React.useCallback((index) => {
        requestStore.removeParam(type, index);
    }, [requestStore, type]);
    const handleAddParam = React.useCallback(({ key = '', value = '', enabled = true }) => {
        requestStore.addParam(type, key, value, enabled);
    }, [requestStore, type]);
    const checkParam = React.useCallback((param, index) => {
        if (param.name === '' && param.value === '') {
            handleRemoveParam(index);
        }
    }, [handleRemoveParam]);
    return (React.createElement("div", { className: classnames_1.default('RequestMaker__RequestParameters', className) },
        lodash_1.map(parameters, (param, index) => {
            return (React.createElement("div", { key: `param-row-${index}`, className: "flex border-b RequestMaker__RequestParameters-row group" },
                React.createElement("div", { className: "flex items-center justify-center pr-4 border-r" },
                    React.createElement(ui_kit_1.Checkbox, { alignIndicator: "right", className: "mb-0", checked: param.isEnabled, onChange: () => {
                            handlerPropChange('isEnabled', index, !param.isEnabled);
                        } })),
                React.createElement("div", { className: "flex-1 border-r" }, suggestRenderer ? (suggestRenderer({
                    name: param.name,
                    params: parameters,
                    index,
                    inFocus,
                    setInFocus,
                    handlerPropChange,
                    onBlur: () => checkParam(param, index),
                })) : (React.createElement(ui_kit_1.InputGroup, { autoFocus: inFocus.index === index && inFocus.prop === 'name', className: "w-full h-full", type: "text", onChange: (event) => handlerPropChange('name', index, event.currentTarget.value), onBlur: () => checkParam(param, index), placeholder: "Key", value: param.name || '' }))),
                React.createElement("div", { className: "flex-1 border-r" },
                    React.createElement(ui_kit_1.InputGroup, { autoFocus: inFocus.index === index && inFocus.prop === 'value', className: "w-full h-full", type: "text", onChange: (event) => handlerPropChange('value', index, event.currentTarget.value), onBlur: () => checkParam(param, index), placeholder: lodash_1.get(param, 'schema.description') || 'Value', value: param.value || '' })),
                React.createElement("div", { className: "flex items-center justify-center px-2" },
                    React.createElement(ui_kit_1.Button, { className: "invisible group-hover:visible", tabIndex: -1, minimal: true, small: true, icon: "cross", onClick: () => handleRemoveParam(index) }))));
        }),
        React.createElement("div", { className: "flex RequestMaker__RequestParameters-placeholder" },
            React.createElement("div", { className: "flex items-center justify-center pr-4 border-r" },
                React.createElement(ui_kit_1.Checkbox, { alignIndicator: "right", className: "invisible mb-0" })),
            React.createElement("div", { className: "flex-1 border-r" },
                React.createElement(ui_kit_1.InputGroup, { className: "w-full h-full", type: "text", onFocus: event => {
                        handleAddParam({ key: event.currentTarget.value });
                        setInFocus({
                            prop: 'name',
                            index: requestStore[`${type}Params`].length - 1,
                        });
                    }, onChange: () => null, placeholder: "Key", value: "" })),
            React.createElement("div", { className: "flex-1 border-r" },
                React.createElement(ui_kit_1.InputGroup, { className: "w-full h-full", type: "text", onFocus: event => {
                        handleAddParam({ value: event.currentTarget.value });
                        setInFocus({
                            prop: 'value',
                            index: requestStore[`${type}Params`].length - 1,
                        });
                    }, onChange: () => null, placeholder: "Value", value: "" })),
            React.createElement("div", { className: "flex items-center justify-center px-2" },
                React.createElement(ui_kit_1.Button, { className: "invisible", tabIndex: -1, minimal: true, small: true, icon: "cross" })))));
});
exports.RequestParameters.displayName = 'RequestMaker.RequestParameters';
//# sourceMappingURL=Parameters.js.map