import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback, useEffect, useMemo, 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
 * @deprecated This component is deprecated use SingleSelectListItem instead
 */
export function LegacySingleSelectListItem({ source, selected, onSelect, onMouseOver = () => { }, onMouseOut = () => { }, }) {
    const [isOverflowed, setIsOverflowed] = useState(false);
    const nodeRef = useRef(null);
    const checkOverflow = useCallback(() => {
        if (nodeRef.current) {
            // Checks if ellipsis has been applicated on title span
            const newIsOverflowed = nodeRef.current.offsetWidth < nodeRef.current.scrollWidth;
            if (newIsOverflowed !== isOverflowed) {
                setIsOverflowed(newIsOverflowed);
            }
        }
    }, [isOverflowed]);
    useEffect(() => {
        checkOverflow();
    });
    const classNames = useMemo(() => {
        const generatedSeleniumClass = `s-${simplifyText(source.title)}`;
        return cx("gd-list-item", generatedSeleniumClass, { "is-selected": selected });
    }, [source.title, selected]);
    const handleSelect = useCallback(() => {
        onSelect(source);
    }, [onSelect, source]);
    const handleMouseOver = useCallback(() => {
        onMouseOver(source);
    }, [onMouseOver, source]);
    const handleMouseOut = useCallback(() => {
        onMouseOut(source);
    }, [onMouseOut, source]);
    const renderTitle = useCallback(() => {
        const { title } = source;
        const titleElement = _jsx("span", { ref: nodeRef, 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;
    }, [isOverflowed, source]);
    const renderIcon = useCallback((icon) => {
        if (icon) {
            const iconClasses = cx("gd-list-icon", icon);
            return _jsx("span", { className: iconClasses });
        }
        return null;
    }, []);
    const icon = source?.icon;
    return (_jsxs("div", { className: classNames, onClick: handleSelect, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, children: [renderIcon(icon), renderTitle()] }));
}
