import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback } from "react";
import cx from "classnames";
import { ShortenedText } from "../../../../ShortenedText/ShortenedText.js";
import { UiTooltip } from "../../../UiTooltip/UiTooltip.js";
import { typedUiMenuContextStore } from "../../context.js";
import { e } from "../../menuBem.js";
function getTooltipId(item, makeItemId) {
    const itemId = makeItemId(item);
    return item.tooltip && itemId ? `${itemId}__tooltip` : undefined;
}
/**
 * @internal
 */
export function DefaultUiMenuInteractiveItemWrapper({ item, }) {
    const { useContextStore, createSelector } = typedUiMenuContextStore();
    const selector = createSelector((ctx) => ({
        onSelect: ctx.onSelect,
        controlType: ctx.controlType,
        scrollToView: ctx.scrollToView,
        setFocusedId: ctx.setFocusedId,
        makeItemId: ctx.makeItemId,
        itemClassName: ctx.itemClassName,
        itemDataTestId: ctx.itemDataTestId,
        InteractiveItemComponent: ctx.InteractiveItem,
        isFocused: ctx.focusedItem?.id === item.id,
    }));
    const { onSelect, scrollToView, controlType, setFocusedId, makeItemId, itemClassName, itemDataTestId, InteractiveItemComponent, isFocused, } = useContextStore(selector);
    const scrollToItem = (element) => {
        if (!element || !isFocused) {
            return;
        }
        scrollToView(element);
    };
    const handleMouseFocus = useCallback(() => {
        if (controlType !== "mouse") {
            return;
        }
        setFocusedId(item.id);
    }, [controlType, item.id, setFocusedId]);
    const handleSelect = useCallback((e) => {
        if (item.isDisabled) {
            return;
        }
        onSelect(item, e);
    }, [item, onSelect]);
    const classNames = cx(e("item-wrapper", {
        isFocused,
        isDisabled: !!item.isDisabled,
        isDestructive: !!item.isDestructive,
    }), typeof itemClassName === "function" ? itemClassName(item) : itemClassName);
    const dataTestId = typeof itemDataTestId === "function" ? itemDataTestId(item) : itemDataTestId;
    const tooltipId = getTooltipId(item, makeItemId);
    return (_jsx("li", { ref: scrollToItem, role: "menuitem", ...item.ariaAttributes, "aria-haspopup": item.subItems ? "menu" : item.ariaAttributes?.["aria-haspopup"], "aria-disabled": item.isDisabled, "aria-describedby": [tooltipId, item.ariaAttributes?.["aria-describedby"]].filter(Boolean).join(" ") || undefined, onMouseMove: handleMouseFocus, onClick: item.isDisabled ? undefined : handleSelect, tabIndex: -1, id: makeItemId(item), className: classNames, "data-testid": dataTestId, children: _jsx(InteractiveItemComponent, { item: item, isFocused: isFocused }) }));
}
/**
 * @internal
 */
export function DefaultUiMenuInteractiveItem({ item, isFocused, }) {
    const { useContextStore, createSelector } = typedUiMenuContextStore();
    const selector = createSelector((ctx) => ({ makeItemId: ctx.makeItemId }));
    const { makeItemId } = useContextStore(selector);
    const tooltipId = getTooltipId(item, makeItemId);
    return (_jsx(UiTooltip, { id: tooltipId, anchor: _jsxs("div", { className: e("item", {
                isFocused,
                isSelected: !!item.isSelected,
                isDisabled: !!item.isDisabled,
                isDestructive: !!item.isDestructive,
            }), children: [item.iconLeft ? item.iconLeft : null, _jsx(ShortenedText, { className: e("item-title"), ellipsisPosition: "end", children: item.stringTitle }), !!item.subItems && _jsx("i", { className: "gd-icon-navigateright" }), item.iconRight ? item.iconRight : null] }), content: item.tooltip, disabled: !item.tooltip, optimalPlacement: true, triggerBy: ["hover"], arrowPlacement: "left", width: item.tooltipWidth }));
}
