import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback, useEffect } from "react";
import { useCombineRefs } from "@gooddata/sdk-ui";
import { useFocusWithinContainer } from "../../hooks/useFocusWithinContainer.js";
import { ScopedIdStore, useScopedIdStoreValue } from "../../hooks/useScopedId.js";
import { UiTabsBem } from "../bem.js";
import { getTypedUiTabsContextStore } from "../context.js";
import { useTabsKeyboardNavigation } from "../useTabsKeyboardNavigation.js";
/**
 * @internal
 */
export function DefaultUiTabsContainer(_props) {
    const store = getTypedUiTabsContextStore();
    const { Tab, accessibilityConfig, size, tabs, selectedTabId, onTabSelect, onTabDoubleClick, containerRef: resizeContainerRef, AllTabs, disableBottomBorder, isOverflowing, } = store.useContextStoreValues([
        "Tab",
        "accessibilityConfig",
        "size",
        "tabs",
        "selectedTabId",
        "onTabSelect",
        "onTabDoubleClick",
        "containerRef",
        "AllTabs",
        "disableBottomBorder",
        "isOverflowing",
    ]);
    const handleSelectTab = useCallback((tab) => {
        onTabSelect(tab);
    }, [onTabSelect]);
    const { onKeyDown, focusedItem } = useTabsKeyboardNavigation({
        items: tabs,
        onSelect: handleSelectTab,
        focusedIndex: tabs.findIndex((t) => t.id === selectedTabId) ?? 0,
    });
    const scopedIdStoreValue = useScopedIdStoreValue((item) => item?.id ?? "");
    const focusedTabId = focusedItem
        ? (focusedItem.tabId ?? scopedIdStoreValue.makeId({ item: focusedItem, specifier: "tab" }))
        : "";
    const { containerRef: focusContainerRef } = useFocusWithinContainer(focusedTabId);
    const focusedItemContainerId = scopedIdStoreValue.makeId({
        item: focusedItem,
        specifier: "tab-scroll-target",
    });
    useEffect(() => {
        document
            .getElementById(focusedItemContainerId)
            ?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
    }, [focusedItemContainerId, selectedTabId, isOverflowing]);
    return (_jsxs("div", { className: UiTabsBem.b({
            size: size ?? "medium",
            overflow: true,
            "disable-border": disableBottomBorder ?? false,
        }), children: [
            _jsx("div", { className: UiTabsBem.e("container"), ref: useCombineRefs(resizeContainerRef, focusContainerRef), onKeyDown: onKeyDown, id: scopedIdStoreValue.containerId, tabIndex: -1, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, role: accessibilityConfig?.role, children: _jsx(ScopedIdStore, { value: scopedIdStoreValue, children: tabs.map((tab) => {
                        const isSelected = selectedTabId === tab.id;
                        const onSelect = () => onTabSelect(tab);
                        const onDoubleClick = () => onTabDoubleClick?.(tab);
                        const isFocused = focusedItem === tab;
                        return (_jsx(Tab, { tab: tab, isSelected: isSelected, isFocused: isFocused, onSelect: onSelect, onDoubleClick: onDoubleClick }, tab.id));
                    }) }) }), _jsx(AllTabs, {})
        ] }));
}
