"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RequestEndpoint = 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 urijs_1 = tslib_1.__importDefault(require("urijs"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const highlightText_1 = require("../../../utils/highlightText");
const Method_1 = require("./Method");
const Send_1 = require("./Send");
const ServerSuggest = Select_1.Suggest.ofType();
const serverUrlRenderer = (serverUrl, { handleClick, modifiers, query }) => {
    if (!modifiers.matchesPredicate) {
        return null;
    }
    return (React.createElement(ui_kit_1.MenuItem, { active: modifiers.active, key: serverUrl, onClick: handleClick, text: highlightText_1.highlightText(serverUrl, query) }));
};
const addServerUrlRenderer = (query, active, handleClick) => {
    return (React.createElement(ui_kit_1.MenuItem, { icon: "add", text: `Use "${query}"`, active: active, onClick: handleClick, shouldDismissPopover: false }));
};
exports.RequestEndpoint = mobx_react_lite_1.observer(({ className }) => {
    const store = useRequestMaker_1.useRequestMakerStore();
    const requestStore = useRequestMaker_1.useRequestMakerStore('request');
    const [url, setUrl] = React.useState();
    const [baseUrlTransientValue, setBaseUrlTransientValue] = React.useState();
    const onServerSuggest = (serverUrl) => {
        if (requestStore.servers && !requestStore.servers.find(s => s.url === serverUrl)) {
            requestStore.publicServers = lodash_1.uniqBy([
                ...requestStore.publicServers,
                {
                    url: serverUrl,
                },
            ], 'url');
        }
        setBaseUrlTransientValue('');
        if (!requestStore.shouldMock) {
            requestStore.publicBaseUrl = serverUrl;
        }
    };
    const showServerSuggestor = requestStore.servers && requestStore.servers.length > 0;
    React.useEffect(() => {
        const query = new urijs_1.default(requestStore.url).search();
        const pathAndQuery = `${requestStore.templatedPath}${query}`;
        setUrl(showServerSuggestor ? pathAndQuery : `${requestStore.baseUrl}${pathAndQuery}`);
    }, [requestStore.url, requestStore.templatedPath, requestStore.baseUrl, showServerSuggestor]);
    const onUrlChange = (e) => {
        if (showServerSuggestor) {
            const { path, query } = urijs_1.default.parse(e.target.value);
            requestStore.templatedPath = path || '/';
            requestStore.setQueryParamsFromString(query || '');
        }
        else {
            requestStore.url = e.target.value;
        }
    };
    return (React.createElement("div", { className: classnames_1.default('RequestMaker__RequestEndpoint flex border rounded-t', className) },
        React.createElement(Method_1.RequestMethod, { className: "w-32 border-r" }),
        showServerSuggestor && (React.createElement(ServerSuggest, { selectedItem: requestStore.baseUrl, className: "border-r RequestMaker__RequestHost", query: baseUrlTransientValue || '', onQueryChange: setBaseUrlTransientValue, inputValueRenderer: item => item, createNewItemFromQuery: newUrl => newUrl, createNewItemRenderer: addServerUrlRenderer, items: lodash_1.map(requestStore.servers, server => server.url), itemRenderer: serverUrlRenderer, itemPredicate: (q, item) => {
                if (requestStore.baseUrl === baseUrlTransientValue)
                    return true;
                return lodash_1.toLower(item).indexOf(q.toLowerCase()) >= 0;
            }, onItemSelect: onServerSuggest, resetOnClose: false, resetOnQuery: false, resetOnSelect: false, popoverProps: {
                minimal: true,
            }, inputProps: {
                placeholder: 'Enter request URL',
                large: true,
            } })),
        React.createElement(ui_kit_1.InputGroup, { className: "flex-1 border-r shadow-none RequestMaker__RequestPath", placeholder: "/", value: url || '', onChange: (e) => setUrl(e.target.value), onBlur: onUrlChange, onKeyPress: e => {
                if (e.key === 'Enter') {
                    onUrlChange(e);
                    store.send();
                }
            }, large: true }),
        React.createElement(Send_1.RequestSend, null)));
});
exports.RequestEndpoint.displayName = 'RequestMaker.RequestEndpoint';
//# sourceMappingURL=Endpoint.js.map