import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useMemo, useRef } from "react";
import { bem } from "../@utils/bem.js";
import { makeTabsKeyboardNavigation } from "../@utils/keyboardNavigation.js";
const { b, e } = bem("gd-ui-kit-tabs");
/**
 * @internal
 */
export function UiTabs({ size = "medium", tabs, onTabSelect, selectedTabId, accessibilityConfig, }) {
    const tabRefs = useRef([]);
    const focusedIndexRef = useRef(null);
    const focusTab = (index) => {
        tabRefs.current[index]?.focus();
    };
    const handleKeyDown = useMemo(() => makeTabsKeyboardNavigation({
        onFocusPrevious: () => {
            const previousTabIndex = (focusedIndexRef.current - 1 + tabs.length) % tabs.length;
            focusTab(previousTabIndex);
        },
        onFocusNext: () => {
            const nextTabIndex = (focusedIndexRef.current + 1) % tabs.length;
            focusTab(nextTabIndex);
        },
        onFocusFirst: () => {
            focusTab(0);
        },
        onFocusLast: () => {
            focusTab(tabs.length - 1);
        },
        onSelect: () => {
            const focusedTab = tabs[focusedIndexRef.current];
            onTabSelect(focusedTab);
        },
    }), [tabs, onTabSelect]);
    return (_jsx("div", { className: b({ size }), "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, role: accessibilityConfig?.role, children: tabs.map((tab, index) => (_jsx("button", { className: e("item", { selected: tab.id === selectedTabId }), onClick: () => onTabSelect(tab), role: accessibilityConfig?.tabRole, "aria-selected": tab.id === selectedTabId, tabIndex: tab.id === selectedTabId ? 0 : -1, ref: (el) => {
                tabRefs.current[index] = el;
            }, onKeyDown: handleKeyDown, onFocus: () => (focusedIndexRef.current = index), children: _jsx("span", { className: e("label"), children: tab.label }) }, tab.id))) }));
}
//# sourceMappingURL=UiTabs.js.map