import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { FormattedMessage, useIntl } from "react-intl";
function AttrTooltipElements({ elements, totalCount }) {
    const intl = useIntl();
    const remainingElementsCount = totalCount - elements.length;
    return (_jsxs(_Fragment, { children: [elements.map((element, idx) => (_jsxs("span", { className: "gd-attribute-element s-attribute-element", children: [element.title || `(${intl.formatMessage({ id: "empty_value" })})`, _jsx("br", {})
                ] }, idx))), remainingElementsCount > 0 && (_jsx("span", { className: "attribute-tooltip-elements-more", children: _jsx(FormattedMessage, { id: "attributesDropdown.details.shortening_decoration", values: { count: remainingElementsCount } }) }, elements.length))] }));
}
/**
 * @internal
 */
export function AttributeListItemTooltipContent({ item, attributesDataSetLoading, attributesElementsLoading, attributeDataSet, attributeElements, }) {
    return (_jsxs("div", { className: "gd-attribute-dropdown-list-tooltip-content s-attribute-dropdown-item-list-tooltip-content", children: [
            _jsx("h3", { className: "s-attribute-filter-tooltip-header", children: item.attribute.title }), _jsx("h4", { children: _jsx(FormattedMessage, { id: "attributesDropdown.details.dataset" }) }), _jsx("p", { className: "s-attribute-filter-tooltip-item-dataset", children: attributesDataSetLoading ? _jsx(FormattedMessage, { id: "loading" }) : attributeDataSet?.title }), _jsx("h4", { children: _jsx(FormattedMessage, { id: "attributesDropdown.details.values" }) }), _jsx("p", { className: "s-attribute-filter-tooltip-item-elements", children: attributesElementsLoading ? (_jsx(FormattedMessage, { id: "loading" })) : (_jsx(AttrTooltipElements, { elements: attributeElements.elements, totalCount: attributeElements.totalCount })) })
        ] }));
}
