import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useCallback, useMemo } from "react";
import { useScopedId } from "../../hooks/useScopedId.js";
import { UiDropdown } from "../../UiDropdown/UiDropdown.js";
import { isSeparator } from "../../UiListbox/defaults/DefaultUiListboxStaticItemComponent.js";
import { UiMenu } from "../../UiMenu/UiMenu.js";
import { UiTabsBem } from "../bem.js";
import { getTypedUiTabsContextStore } from "../context.js";
/**
 * @internal
 */
export function DefaultUiTabsTabActions({ tab, location, id, tabIndex, isOpen, onToggleOpen, }) {
    const store = getTypedUiTabsContextStore();
    const { TabActionsButton, onActionTriggered } = store.useContextStoreValues([
        "TabActionsButton",
        "onActionTriggered",
    ]);
    const tabElementId = useScopedId(tab, "tab-scroll-target");
    const tabActionsId = useScopedId(tab, "actions");
    const menuItems = useMemo(() => tab.actions?.map((action) => {
        return isSeparator(action)
            ? action
            : {
                type: "interactive",
                id: action.id,
                stringTitle: action.label,
                isDisabled: action.isDisabled,
                isDestructive: action.isDestructive,
                iconLeft: action.iconLeft,
                iconRight: action.iconRight,
                tooltip: action.tooltip,
                tooltipWidth: action.tooltipWidth,
                data: {
                    dataTestId: action.dataTestId,
                    onSelect: ((ctx) => {
                        action.onSelect?.(ctx);
                        onActionTriggered({ action, tab, location });
                        if (action.closeOnSelect !== false) {
                            onToggleOpen(false);
                        }
                        // Scroll to the tab after the tabs are redrawn
                        window.setTimeout(() => {
                            document.getElementById(tabElementId)?.scrollIntoView({
                                inline: "nearest",
                                block: "nearest",
                                behavior: "instant",
                            });
                            if (location === "tabs") {
                                // The second scrollIntoView is needed to make sure the actions end up visible
                                // if the tab is larger than the tablist element. This can happen for very long names.
                                document.getElementById(tabActionsId)?.scrollIntoView({
                                    inline: "nearest",
                                    block: "nearest",
                                    behavior: "instant",
                                });
                            }
                        }, 50);
                    }),
                },
            };
    }) ?? [], [tab, onActionTriggered, location, onToggleOpen, tabElementId, tabActionsId]);
    const handleItemSelected = useCallback((item) => {
        if (item.type !== "interactive") {
            return;
        }
        item.data.onSelect?.({ tab });
    }, [tab]);
    const itemDataTestId = useCallback((item) => item.type === "interactive" ? item.data.dataTestId : undefined, []);
    if (menuItems.length === 0) {
        return null;
    }
    return (_jsx("div", { className: UiTabsBem.e("actions-wrapper", { location }), children: _jsx(UiDropdown, { renderButton: ({ toggleDropdown, isOpen, ariaAttributes }) => (_jsx(TabActionsButton, { tab: tab, isOpen: isOpen, location: location, onClick: toggleDropdown, ariaAttributes: ariaAttributes, id: id, tabIndex: tabIndex })), renderBody: ({ ariaAttributes, closeDropdown }) => {
                return (_jsx(UiMenu, { items: menuItems, onSelect: handleItemSelected, onClose: closeDropdown, shouldCloseOnSelect: false, ariaAttributes: ariaAttributes, maxWidth: 160, maxHeight: 400, size: "small", containerBottomPadding: "small", containerTopPadding: "small", itemDataTestId: itemDataTestId }));
            }, autofocusOnOpen: true, returnFocusTo: tabActionsId, enableFocusTrap: false, alignPoints: [{ align: "bl tl" }, { align: "br tr" }], closeOnEscape: true, closeOnOutsideClick: true, accessibilityConfig: {
                triggerRole: "button",
                popupRole: "listbox",
            }, isOpen: isOpen, onOpenChange: onToggleOpen }) }));
}
