import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2025 GoodData Corporation
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useIntl } from "react-intl";
/**
 * @internal
 */
export const FilterLabel = memo(function FilterLabel({ isAllSelected = false, isDate = false, selection = "", noData = false, selectionSize, title, }) {
    const intl = useIntl();
    const [hasEllipsis, setHasEllipsis] = useState(false);
    const labelRef = useRef(null);
    const checkEllipsis = useCallback(() => {
        if (!labelRef.current)
            return;
        const { offsetWidth, scrollWidth } = labelRef.current;
        // for some reason, IE11 returns offsetWidth = scrollWidth - 1 even when there is no ellipsis
        const newHasEllipsis = offsetWidth < scrollWidth - 1;
        if (newHasEllipsis !== hasEllipsis) {
            setHasEllipsis(newHasEllipsis);
        }
    }, [hasEllipsis]);
    useEffect(() => {
        checkEllipsis();
    }, [checkEllipsis]);
    const renderSelectionLabel = useCallback((content) => {
        return _jsx("span", { className: "count s-total-count", children: content });
    }, []);
    const renderSelection = useMemo(() => {
        if (!isDate && !noData) {
            if (isAllSelected) {
                return renderSelectionLabel(intl.formatMessage({ id: "gs.filterLabel.all" }));
            }
            if (selectionSize === 0) {
                return renderSelectionLabel(intl.formatMessage({ id: "gs.filterLabel.none" }));
            }
            if (hasEllipsis && selectionSize !== undefined && selectionSize > 0) {
                return renderSelectionLabel(`(${selectionSize})`);
            }
        }
        return false;
    }, [isDate, noData, isAllSelected, selectionSize, hasEllipsis, renderSelectionLabel, intl]);
    const renderTitle = useMemo(() => {
        return [
            _jsx("span", { className: "filter-label-title", title: title, children: title }, "title"),
            isAllSelected && !isDate && !noData ? _jsx("span", { children: ": " }, "title-colon") : false,
        ];
    }, [title, isAllSelected, isDate, noData]);
    const renderSelectedElements = useMemo(() => {
        if (!selection || isAllSelected) {
            return false;
        }
        return [
            _jsx("span", { children: ": " }, "selection-colon"),
            _jsx("span", { className: "filter-label-selection", children: selection }, "selection"),
        ];
    }, [selection, isAllSelected]);
    return (_jsxs("div", { role: "attribute-filter-label", className: "adi-attribute-filter-label s-attribute-filter-label", children: [
            _jsxs("span", { className: "label", ref: labelRef, children: [renderTitle, renderSelectedElements] }), renderSelection] }));
});
