import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
import cx from "classnames";
import { simplifyText } from "@gooddata/util";
import { Bubble } from "../Bubble/Bubble.js";
import { BubbleHoverTrigger } from "../Bubble/BubbleHoverTrigger.js";
const BUBBLE_OFFSET_X = 16;
/**
 * @internal
 */
const DivElement = forwardRef(function DivElement({ children, ...props }, ref) {
    return (_jsx("div", { ref: ref, className: props.className, onClick: props.onClick, onMouseOver: props.onMouseOver, onMouseOut: props.onMouseOut, role: props.accessibilityConfig?.role, "aria-disabled": props.accessibilityConfig?.ariaDisabled, "aria-haspopup": props.accessibilityConfig?.ariaHasPopup, "aria-expanded": props.accessibilityConfig?.ariaExpanded, "aria-describedby": props.accessibilityConfig?.ariaDescribedBy, tabIndex: props.tabIndex, "data-testid": props.dataTestId ??
            (props.type === "separator"
                ? "item-separator"
                : props.type === "header"
                    ? "item-header"
                    : undefined), children: children }));
});
/**
 * @internal
 */
const ButtonElement = forwardRef(function ButtonElement({ children, ...props }, ref) {
    return (_jsx("button", { ref: ref, type: "button", className: props.className, onClick: props.onClick, onMouseOver: props.onMouseOver, onMouseOut: props.onMouseOut, role: props.accessibilityConfig?.role, "aria-disabled": props.accessibilityConfig?.ariaDisabled, "aria-haspopup": props.accessibilityConfig?.ariaHasPopup, "aria-expanded": props.accessibilityConfig?.ariaExpanded, "aria-describedby": props.accessibilityConfig?.ariaDescribedBy, tabIndex: props.tabIndex, "data-testid": props.dataTestId, children: children }));
});
/**
 * @internal
 */
export const SingleSelectListItem = forwardRef(function SingleSelectListItem(props, ref) {
    const { title, icon, type, className, info, variant = "default", eventsOnBubble = false, hideDelayBubble, isSelected, isFocused, isMenu, elementType = "div", iconRenderer, infoRenderer, } = props;
    const [isOverflowed, setIsOverflowed] = useState(false);
    const titleRef = useRef(null);
    const checkOverflow = useCallback(() => {
        if (titleRef.current) {
            const hasOverflow = titleRef.current.offsetWidth < titleRef.current.scrollWidth;
            setIsOverflowed(hasOverflow);
        }
    }, []);
    useEffect(() => {
        checkOverflow();
        window.addEventListener("resize", checkOverflow);
        let resizeObserver = null;
        if (titleRef.current && window.ResizeObserver) {
            resizeObserver = new ResizeObserver(checkOverflow);
            resizeObserver.observe(titleRef.current);
        }
        return () => {
            window.removeEventListener("resize", checkOverflow);
            if (resizeObserver) {
                resizeObserver.disconnect();
            }
        };
    }, [title, checkOverflow]);
    const getClassNames = () => {
        const testClassName = `s-${simplifyText(title ?? "")}`;
        return cx("gd-list-item", className, testClassName, {
            "is-selected": isSelected,
            "is-submenu": isMenu,
            "is-focused": isFocused,
            [`variant-${variant}`]: variant !== "default",
        });
    };
    const renderIcon = (iconProp) => {
        if (!iconProp)
            return null;
        const iconClasses = cx("gd-list-icon", typeof iconProp === "string" ? iconProp : undefined);
        return (_jsx("span", { "data-testid": "icon", "aria-hidden": true, className: iconClasses, children: typeof iconProp === "string" ? null : iconProp }));
    };
    const renderTitle = () => {
        const titleElement = _jsx("span", { ref: titleRef, children: title });
        if (isOverflowed) {
            return (_jsxs(BubbleHoverTrigger, { children: [titleElement, _jsx(Bubble, { className: "bubble-primary", alignPoints: [{ align: "cr cl" }, { align: "cl cr" }], arrowOffsets: {
                            "cr cl": [BUBBLE_OFFSET_X, 0],
                            "cl cr": [-BUBBLE_OFFSET_X, 0],
                        }, children: title })
                ] }));
        }
        return titleElement;
    };
    const renderInfo = () => {
        if (!info) {
            return null;
        }
        return (_jsx("div", { "data-testid": "item-info", className: "gd-list-item-bubble s-list-item-info", children: _jsxs(BubbleHoverTrigger, { tagName: "div", showDelay: 200, hideDelay: hideDelayBubble ?? 0, eventsOnBubble: eventsOnBubble, children: [
                    _jsx("div", { className: "inlineBubbleHelp" }), _jsx(Bubble, { className: "bubble-primary", alignPoints: [{ align: "cr cl" }], arrowOffsets: { "cr cl": [15, 0] }, children: info })
                ] }) }));
    };
    const children = (_jsxs(_Fragment, { children: [iconRenderer ? iconRenderer(icon) : renderIcon(icon), renderTitle(), infoRenderer ? infoRenderer(info) : renderInfo()] }));
    if (type === "separator" || type === "header") {
        return (_jsx(DivElement, { ref: ref, ...props, className: cx("gd-list-item", {
                "gd-list-item-separator s-list-separator": type === "separator",
                "gd-list-item-header s-list-header": type === "header",
            }, className), children: type === "header" ? children : null }));
    }
    return elementType === "button" ? (_jsx(ButtonElement, { ref: ref, ...props, className: getClassNames(), children: children })) : (_jsx(DivElement, { ref: ref, ...props, className: getClassNames(), children: children }));
});
