/**
 * QuerySuggestions Component
 *
 * Standalone component for displaying query suggestions
 */
import React, { useState, useEffect } from "react";
import { useSearchContext } from "./SearchProvider";
import { useQuerySuggestions } from "../hooks/useQuerySuggestions";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
export const QuerySuggestions = ({ query = "", maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, renderEmpty, showTitle = false, title = "Suggestions", className, style, theme: customTheme, }) => {
    const { client, theme } = useSearchContext();
    const [selectedIndex, setSelectedIndex] = useState(-1);
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { suggestions, loading, error } = useQuerySuggestions({
        client,
        query,
        enabled: query.length >= minQueryLength,
        debounceMs,
        maxSuggestions,
    });
    const displayedSuggestions = suggestions.slice(0, maxSuggestions);
    const suggestionsTheme = customTheme || {};
    const defaultRenderSuggestion = (suggestion, index) => (React.createElement("div", { key: index },
        React.createElement("span", null, suggestion.query),
        suggestion.count !== undefined && (React.createElement("span", { className: "seekora-query-suggestions__item-count" },
            "(",
            suggestion.count,
            ")"))));
    const defaultRenderEmpty = () => (React.createElement("div", { className: "seekora-query-suggestions__empty" }, "No suggestions available"));
    const handleSuggestionClick = (suggestion) => {
        if (onSuggestionClick) {
            onSuggestionClick(suggestion.query);
        }
    };
    if (query.length < minQueryLength) {
        return null;
    }
    if (error || (!loading && displayedSuggestions.length === 0)) {
        return (React.createElement("div", { className: clsx("seekora-query-suggestions", suggestionsTheme.container, className), style: style },
            showTitle && (React.createElement("div", { className: clsx("seekora-query-suggestions__title", suggestionsTheme.title) }, title)),
            renderEmpty ? renderEmpty() : defaultRenderEmpty()));
    }
    const renderFn = renderSuggestion || defaultRenderSuggestion;
    return (React.createElement("div", { className: clsx("seekora-query-suggestions", suggestionsTheme.container, className), style: style },
        showTitle && (React.createElement("div", { className: clsx("seekora-query-suggestions__title", suggestionsTheme.title) }, title)),
        React.createElement("div", { className: clsx("seekora-query-suggestions__list", suggestionsTheme.suggestionsList) }, displayedSuggestions.map((suggestion, index) => {
            const isSelected = index === selectedIndex;
            return (React.createElement("div", { key: index, className: clsx("seekora-query-suggestions__item", isSelected && "seekora-query-suggestions__item--active", suggestionsTheme.suggestionItem, isSelected && suggestionsTheme.suggestionItemActive), onClick: () => handleSuggestionClick(suggestion), onMouseEnter: () => setSelectedIndex(index), onMouseLeave: () => setSelectedIndex(-1) }, renderFn(suggestion, index)));
        }))));
};
