import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { useState } from "react";
import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
import { useAttributeDataSet } from "../../dashboardDropdownBody/configuration/hooks/useAttributeDataSet.js";
import { useAttributeElements } from "../../dashboardDropdownBody/configuration/hooks/useAttributeElements.js";
import { AttributeListItemTooltipContent } from "./AttributeListItemTooltipContent.js";
const ATTR_ELEMENTS_LIMIT = 5;
const bubbleAlignPoints = [
    { align: "tr tl", offset: { x: 0, y: -50 } },
    { align: "tl tr", offset: { x: -170, y: -80 } },
];
/**
 * @internal
 */
export function AttributeListItemTooltip({ item }) {
    const [isHover, setIsHover] = useState(false);
    const { attributeElements, attributesElementsLoading } = useAttributeElements(item.defaultDisplayForm.ref, ATTR_ELEMENTS_LIMIT, isHover);
    const { attributeDataSet, attributesDataSetLoading } = useAttributeDataSet(item.attribute.ref, isHover);
    return (_jsx("div", { children: _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, eventsOnBubble: true, className: "gd-attribute-item-tooltip-icon", children: [
                _jsx("span", { onMouseEnter: () => setIsHover(true), className: "gd-icon-circle-question gd-list-item-tooltip-icon s-attribute-dropdown-list-item-tooltip" }), _jsx(Bubble, { className: "gd-attribute-dropdown-list-item-details s-attribute-filter-details-bubble", alignPoints: bubbleAlignPoints, arrowStyle: { display: "none" }, children: _jsx(AttributeListItemTooltipContent, { item: item, attributesDataSetLoading: attributesDataSetLoading, attributesElementsLoading: attributesElementsLoading, attributeDataSet: attributeDataSet, attributeElements: attributeElements }) })
            ] }) }));
}
