import * as React from "react";
import { SearchResult } from "./SearchResult";
import { useSearch } from "../../hooks/useSearch";
/**
 * Iterates through the responses from every search provider
 * and returns the item with the highest score.
 * Half of the time this makes sense. The other half
 * it doesn't make sense. It's all built on Fuse JS and how
 * it grades the 'score' of a query to an entity.
 */
const findBestMatch = (searchProviderResponses) => {
    if (searchProviderResponses) {
        let bestMatch = null;
        searchProviderResponses.forEach((providerInfo) => {
            var _a;
            (_a = providerInfo === null || providerInfo === void 0 ? void 0 : providerInfo.data) === null || _a === void 0 ? void 0 : _a.forEach((result) => {
                if (bestMatch === null || result.score < bestMatch.score) {
                    bestMatch = result;
                }
            });
        });
        return bestMatch;
    }
    return null;
};
/**
 * Simple component that renders a menu item for the entity that
 * best matches the user's query.
 */
export const SearchBestMatch = () => {
    const { searchResults, searchQuery, resetSearch } = useSearch();
    const bestMatchData = findBestMatch(searchResults);
    if (!bestMatchData)
        return null;
    return (React.createElement("div", null,
        React.createElement("div", { className: "search-title" }, "Best Match"),
        React.createElement(SearchResult, { resetSearch: resetSearch, data: bestMatchData, searchQuery: searchQuery })));
};
//# sourceMappingURL=SearchBestMatch.js.map