/**
 * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
 *
 * Active tab from context; on select updates context and tracks analytics.
 *
 * ARIA compliance (WCAG 2.1 §4.1.2, APG tabs pattern):
 *  - role="tablist" + aria-orientation="horizontal" on the immediate parent of tabs
 *  - role="tab" + aria-selected + aria-controls={panelId} on each button
 *  - Stable ids via React.useId() prefix — callers can render the matching
 *    role="tabpanel" elements using the exported `getCategoriesTabPanelId` helper
 *  - Arrow-left/right cycle tabs; Home/End jump to first/last
 */
import React, { useEffect, useRef, useId, useCallback } from "react";
import { useSuggestionsContext } from "./SuggestionsContext";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../../styles/inject";
/** Derive a stable panel id from the tab-strip id prefix and a tab's own id. */
export function getCategoriesTabPanelId(tablistIdPrefix, tabId) {
    return `${tablistIdPrefix}-panel-${tabId}`;
}
/** Derive a stable tab button id from the tab-strip id prefix and a tab's own id. */
export function getCategoriesTabId(tablistIdPrefix, tabId) {
    return `${tablistIdPrefix}-tab-${tabId}`;
}
export function CategoriesTabs({ className, style, tabClassName, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    // Stable prefix for tab/panel ids within this component instance
    const idPrefix = useId();
    const tablistRef = useRef(null);
    const { filteredTabs, activeTabId, setActiveTab } = useSuggestionsContext();
    const handleKeyDown = useCallback((e) => {
        if (filteredTabs.length === 0)
            return;
        const currentIndex = filteredTabs.findIndex((t) => t.id === activeTabId);
        const last = filteredTabs.length - 1;
        let nextIndex = null;
        switch (e.key) {
            case "ArrowRight":
                nextIndex = currentIndex < last ? currentIndex + 1 : 0;
                break;
            case "ArrowLeft":
                nextIndex = currentIndex > 0 ? currentIndex - 1 : last;
                break;
            case "Home":
                nextIndex = 0;
                break;
            case "End":
                nextIndex = last;
                break;
            default:
                return;
        }
        e.preventDefault();
        const next = filteredTabs[nextIndex];
        setActiveTab(next);
        // Move focus to the newly-active tab button
        const tabEl = tablistRef.current?.querySelector(`[data-tab-id=${JSON.stringify(next.id)}]`);
        tabEl?.focus();
    }, [filteredTabs, activeTabId, setActiveTab, idPrefix]);
    if (filteredTabs.length === 0)
        return null;
    return (React.createElement("div", { ref: tablistRef, role: "tablist", "aria-orientation": "horizontal", className: clsx("seekora-categories-tabs", className), style: style, onKeyDown: handleKeyDown }, filteredTabs.map((tab) => {
        const isActive = activeTabId === tab.id;
        const tabButtonId = getCategoriesTabId(idPrefix, tab.id);
        const panelId = getCategoriesTabPanelId(idPrefix, tab.id);
        return (React.createElement("button", { key: tab.id, id: tabButtonId, "data-tab-id": tab.id, type: "button", role: "tab", "aria-selected": isActive, "aria-controls": panelId, tabIndex: isActive ? 0 : -1, className: clsx("seekora-categories-tabs__tab", isActive && "seekora-categories-tabs__tab--active", tabClassName), onClick: () => setActiveTab(tab) }, tab.label));
    })));
}
