import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback, useState } from "react";
import { simplifyText } from "@gooddata/util";
import { ScopedIdStore } from "../../hooks/useScopedId.js";
import { UiTooltip } from "../../UiTooltip/UiTooltip.js";
import { UiTabsBem } from "../bem.js";
import { getTypedUiTabsContextStore } from "../context.js";
/**
 * @internal
 */
export function DefaultUiTabsTab({ tab, isSelected, onSelect, onDoubleClick, isFocused, }) {
    const store = getTypedUiTabsContextStore();
    const { accessibilityConfig, TabValue, TabActions, maxLabelLength } = store.useContextStoreValues([
        "accessibilityConfig",
        "TabValue",
        "TabActions",
        "maxLabelLength",
    ]);
    const makeId = ScopedIdStore.useContextStoreOptional((ctx) => ctx.makeId);
    const isOverflowing = maxLabelLength !== undefined && tab.label.length > maxLabelLength;
    const tabId = tab.tabId ?? makeId?.({ item: tab, specifier: "tab" });
    const panelId = tab.panelId;
    const autoSelectOnFocus = tab.autoSelectOnFocus ?? false;
    const [isActionsOpen, setIsActionsOpen] = useState(false);
    const handleToggleActionsOpen = useCallback((desiredState) => setIsActionsOpen((wasOpen) => desiredState ?? !wasOpen), [setIsActionsOpen]);
    const handleFocus = () => {
        if (autoSelectOnFocus && !isSelected) {
            onSelect();
        }
    };
    // When this tab is focused, both tab button and actions are tabbable (tabIndex=0)
    // This allows natural Tab key navigation from tab button to actions button
    const tabIndex = isFocused ? 0 : -1;
    const tabButton = (_jsx("button", { className: UiTabsBem.e("item", { selected: isSelected }), onClick: onSelect, onDoubleClick: onDoubleClick, onFocus: handleFocus, role: accessibilityConfig?.tabRole, "aria-selected": isSelected, "aria-controls": panelId, "aria-label": tab.ariaLabel ?? tab.label, tabIndex: tabIndex, id: tabId, "data-testid": `s-tab-${simplifyText(tab.label)}`, children: _jsx(TabValue, { tab: tab, isSelected: isSelected, location: "tabs" }) }));
    return (_jsxs("div", { className: UiTabsBem.e("tab-wrapper", {
            selected: isSelected,
            variant: tab.variant ?? "default",
            focused: isFocused ?? false,
            "actions-open": isActionsOpen,
        }), children: [
            _jsx("div", { className: UiTabsBem.e("tab-scroll-target"), id: makeId?.({ item: tab, specifier: "tab-scroll-target" }) }), isOverflowing ? (_jsx(UiTooltip, { anchor: tabButton, content: tab.label, triggerBy: ["hover", "focus"], arrowPlacement: "top", optimalPlacement: true }, tab.id)) : (tabButton), _jsx("div", { className: UiTabsBem.e("tabs-actions"), id: makeId?.({ item: tab, specifier: "actions" }), children: _jsx(TabActions, { tab: tab, location: "tabs", id: makeId?.({ item: tab, specifier: "selectTabActions" }), tabIndex: tabIndex, isOpen: isActionsOpen, onToggleOpen: handleToggleActionsOpen }) })
        ] }));
}
