// ThemeHarvestSuggestionList — renders query-suggestion chips using the
// merchant's own harvested theme chip HTML (SCRUM-268 storefront hijack).
//
// Analogous to ThemeHarvestPredictiveList but for the query-suggestion chips
// (the "pills" surface). Self-sources suggestions from SuggestionsContext,
// clones the chip template via swapChipHtml per suggestion, and delegates
// click handling to fire the same analytics + select action SuggestionList
// fires. Falls back to <SuggestionList> when the template or swap map is
// absent, or when there are no suggestions.
import React, { useCallback, useMemo } from "react";
import { clsx } from "clsx";
import { useSuggestionsContext } from "./suggestions-primitives/SuggestionsContext";
import { SuggestionList, } from "./suggestions-primitives/SuggestionList";
import { swapChipHtml } from "../theme-cards/swap";
export const ThemeHarvestSuggestionList = ({ chipTemplateHtml, chipSwap, listClassName, maxItems = 8, searchId: _searchId, className, 
// passthrough props for SuggestionList fallback
style, enableHighlightMarkup, highlightMarkupOptions, renderItem, }) => {
    const { suggestions, getAllNavigableItems, activeIndex, selectSuggestion } = useSuggestionsContext();
    const limited = useMemo(() => suggestions.slice(0, maxItems), [suggestions, maxItems]);
    // Pre-compute swapped chip HTML. Memoized on the inputs that change it.
    const swappedHtmls = useMemo(() => {
        if (!chipTemplateHtml || !chipSwap || limited.length === 0)
            return null;
        const results = [];
        for (const suggestion of limited) {
            const term = suggestion.query ?? suggestion.objectID ?? "";
            try {
                results.push(swapChipHtml(chipTemplateHtml, chipSwap, term));
            }
            catch {
                // Any selector-miss falls back the whole list.
                return null;
            }
        }
        return results;
    }, [limited, chipTemplateHtml, chipSwap]);
    // Delegated click: find which chip was clicked, fire select + analytics.
    const handleContainerClick = useCallback((e) => {
        const target = e.target;
        const chip = target.closest("[data-seekora-theme-chip]");
        if (!chip)
            return;
        const idx = Number(chip.dataset.seekoraIndex);
        const suggestion = limited[idx];
        if (!suggestion)
            return;
        // Compute the global navigable index (same logic as SuggestionList).
        const navigableItems = getAllNavigableItems();
        const suggestionStartIndex = navigableItems.findIndex((n) => n.type === "suggestion");
        const globalIndex = suggestionStartIndex >= 0 ? suggestionStartIndex + idx : idx;
        selectSuggestion(suggestion, globalIndex);
    }, [limited, getAllNavigableItems, selectSuggestion]);
    // Fall back when template/swap absent or swapping failed.
    if (!chipTemplateHtml || !chipSwap || swappedHtmls === null) {
        return (React.createElement(SuggestionList, { maxItems: maxItems, className: className, style: style, listClassName: listClassName, enableHighlightMarkup: enableHighlightMarkup, highlightMarkupOptions: highlightMarkupOptions, renderItem: renderItem }));
    }
    if (limited.length === 0)
        return null;
    // Compute active index position relative to suggestion start for aria.
    const navigableItems = getAllNavigableItems();
    const suggestionStartIndex = navigableItems.findIndex((n) => n.type === "suggestion");
    const activeIsInSuggestions = suggestionStartIndex >= 0 &&
        activeIndex >= suggestionStartIndex &&
        activeIndex < suggestionStartIndex + limited.length;
    return (React.createElement("ul", { role: "listbox", className: clsx(className, listClassName), onClick: handleContainerClick }, swappedHtmls.map((html, i) => {
        const globalIndex = suggestionStartIndex >= 0 ? suggestionStartIndex + i : i;
        const isActive = activeIsInSuggestions && activeIndex === globalIndex;
        return (React.createElement("li", { key: i, role: "option", "aria-selected": isActive, "data-seekora-theme-chip": "", "data-seekora-index": i, 
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML: { __html: html } }));
    })));
};
