/**
 * QuerySuggestions Component
 *
 * Standalone component for displaying query suggestions
 */
import React, { useState } from 'react';
import { useSearchContext } from './SearchProvider';
import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
import { clsx } from 'clsx';
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);
    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", { style: { opacity: 0.6, marginLeft: theme.spacing.small } },
            "(",
            suggestion.count,
            ")"))));
    const defaultRenderEmpty = () => (React.createElement("div", { style: {
            padding: theme.spacing.medium,
            textAlign: 'center',
            color: theme.colors.text,
            opacity: 0.6,
        } }, "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(suggestionsTheme.container, className), style: style },
            showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                    fontSize: theme.typography.fontSize.large,
                    fontWeight: 'bold',
                    marginBottom: theme.spacing.medium,
                    color: theme.colors.text,
                } }, title)),
            renderEmpty ? renderEmpty() : defaultRenderEmpty()));
    }
    const renderFn = renderSuggestion || defaultRenderSuggestion;
    return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
        showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                fontSize: theme.typography.fontSize.large,
                fontWeight: 'bold',
                marginBottom: theme.spacing.medium,
                color: theme.colors.text,
            } }, title)),
        React.createElement("div", { className: suggestionsTheme.suggestionsList }, displayedSuggestions.map((suggestion, index) => {
            const isSelected = index === selectedIndex;
            return (React.createElement("div", { key: index, className: clsx(suggestionsTheme.suggestionItem, isSelected && suggestionsTheme.suggestionItemActive), onClick: () => handleSuggestionClick(suggestion), onMouseEnter: () => setSelectedIndex(index), onMouseLeave: () => setSelectedIndex(-1), style: {
                    padding: theme.spacing.medium,
                    cursor: 'pointer',
                    borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
                    transition: 'background-color 0.2s ease',
                    backgroundColor: isSelected ? theme.colors.hover : 'transparent',
                    marginBottom: index < displayedSuggestions.length - 1 ? theme.spacing.small : 0,
                } }, renderFn(suggestion, index)));
        }))));
};
