"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RequestHeaders = void 0;
const tslib_1 = require("tslib");
const ui_kit_1 = require("@stoplight/ui-kit");
const Select_1 = require("@stoplight/ui-kit/Select");
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 headers_1 = require("../../../utils/headers");
const highlightText_1 = require("../../../utils/highlightText");
const Parameters_1 = require("./Parameters");
exports.RequestHeaders = mobx_react_lite_1.observer(({ className }) => {
    return (React.createElement(Parameters_1.RequestParameters, { type: "header", className: classnames_1.default('RequestMaker__RequestHeaders', className), suggestRenderer: ({ name, params, index, inFocus, setInFocus, handlerPropChange, onBlur }) => (React.createElement(HeaderSuggest, { inputProps: {
                placeholder: 'Specify header name',
                autoFocus: inFocus.index === index && inFocus.prop === 'name',
                onBlur,
                className: 'shadow-none',
            }, noResults: React.createElement("span", null,
                "Unknown header ",
                React.createElement("em", null, name)), inputValueRenderer: (headerField) => headerField.name, itemRenderer: renderHeaderField, items: headers_1.allHeaderFields, itemPredicate: filterHeaderField, openOnKeyDown: true, query: name, popoverProps: {
                targetClassName: 'w-full',
                minimal: true,
                position: 'top-left',
                boundary: 'window',
            }, selectedItem: headers_1.allHeaderFields.find(headerField => headerField.name === name), itemDisabled: headerField => !!params.find(h => h.name === headerField.name), onItemSelect: headerField => {
                handlerPropChange('name', index, headerField.name);
                setInFocus({
                    prop: 'value',
                    index,
                });
            }, onQueryChange: query => {
                handlerPropChange('name', index, query);
                setInFocus({
                    prop: 'value',
                    index,
                });
            } })) }));
});
const HeaderSuggest = Select_1.Suggest.ofType();
const renderCreateHeaderFieldOption = (query, active, handleClick) => (React.createElement(ui_kit_1.MenuItem, { icon: "add", text: `Set custom header "${query}"`, active: active, onClick: handleClick, shouldDismissPopover: false }));
const renderHeaderField = (header, { handleClick, modifiers, query }) => {
    if (!modifiers.matchesPredicate) {
        return null;
    }
    return (React.createElement(ui_kit_1.MenuItem, { active: modifiers.active, disabled: modifiers.disabled, key: header.name, onClick: handleClick, text: highlightText_1.highlightText(header.name, query) }));
};
const filterHeaderField = (query, headerField, _index, exactMatch) => {
    return lodash_1.toLower(headerField.name).indexOf(lodash_1.toLower(query)) >= 0;
};
//# sourceMappingURL=Headers.js.map