import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { simplifyText } from "@gooddata/util";
import { UiIcon } from "../@ui/UiIcon/UiIcon.js";
import { UiTooltip } from "../@ui/UiTooltip/UiTooltip.js";
import { ShortenedText } from "../ShortenedText/ShortenedText.js";
import { isActionKey } from "../utils/events.js";
import { useIdPrefixed } from "../utils/useId.js";
export const ALIGN_POINT = [
    { align: "tc bc", offset: { x: 0, y: -2 } },
    { align: "cc tc", offset: { x: 0, y: 10 } },
    { align: "bl tr", offset: { x: -2, y: -8 } },
];
/**
 * @internal
 */
export function FilterGroupItem({ title, subtitle, selectedItemsCount, totalItemsCount, showSelectionCount, isOpen, isLoading, isLoaded, isError, icon, titleExtension, onClick, buttonRef, dropdownId, disabled, }) {
    const intl = useIntl();
    let buttonTitle = title;
    let buttonSubtitle = subtitle;
    if (isLoading) {
        buttonTitle = title ?? intl.formatMessage({ id: "loading" });
        buttonSubtitle = intl.formatMessage({ id: "loading" });
    }
    const tooltipId = useIdPrefixed("filter-group-item-locked-tooltip");
    const onKeyDown = useCallback((event) => {
        // <div role="button"> doesn't reliably fire click on Enter/Space across browsers and
        // AT modes (ARIA APG requires manual handling). Dispatch onClick ourselves.
        if (!isActionKey(event)) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        if (disabled) {
            return;
        }
        onClick?.();
    }, [disabled, onClick]);
    const handleButtonRef = useCallback((element) => {
        if (!buttonRef) {
            return;
        }
        if (typeof buttonRef === "function") {
            buttonRef(element);
            return;
        }
        buttonRef.current = element;
    }, [buttonRef]);
    let itemsCountString;
    if (selectedItemsCount !== undefined && totalItemsCount !== undefined) {
        itemsCountString = `${selectedItemsCount}/${totalItemsCount}`;
    }
    else if (selectedItemsCount !== undefined) {
        itemsCountString = `${selectedItemsCount}`;
    }
    else if (totalItemsCount !== undefined) {
        itemsCountString = `${totalItemsCount}`;
    }
    const buttonComponent = (_jsxs("div", { className: cx("gd-filter-group-item", {
            error: isError,
            "gd-is-active": isOpen,
            "gd-is-loaded": isLoaded,
            "gd-is-disabled": disabled,
        }), "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-describedby": disabled ? tooltipId : undefined, "aria-disabled": disabled, onClick: disabled ? undefined : onClick, onKeyDown: onKeyDown, "aria-controls": isOpen ? dropdownId : undefined, role: "button", tabIndex: 0, ref: handleButtonRef, "data-testid": `s-filter-group-item-${simplifyText(title ?? null)}`, children: [isError || icon ? (_jsx("div", { className: "gd-filter-group-item-icon", children: isError ? _jsx(UiIcon, { type: "crossCircle", size: 12, color: "currentColor" }) : icon })) : null, _jsxs("div", { className: "gd-filter-group-item-body", children: [
                    _jsxs("div", { className: "gd-filter-group-item-content", children: [
                            _jsxs("div", { className: "gd-filter-group-item-title-content", children: [
                                    _jsx("div", { className: "gd-filter-group-item-title", children: _jsx(ShortenedText, { tooltipAlignPoints: ALIGN_POINT, "data-testid": "s-filter-group-item-title", ellipsisPosition: "end", children: `${buttonTitle}` }) }), _jsx("div", { className: "gd-filter-group-item-title-extension", children: titleExtension })
                                ] }), _jsxs("div", { className: "gd-filter-group-item-subtitle", children: [
                                    _jsx("span", { className: "gd-filter-group-item-selected-items", "data-testid": "s-filter-group-item-subtitle", children: buttonSubtitle }), showSelectionCount && isLoaded ? (_jsx("span", { className: "gd-filter-group-item-selected-items-count", children: `(${itemsCountString})` })) : null] })
                        ] }), _jsx("div", { className: "gd-filter-group-item-chevron", children: _jsx(UiIcon, { type: "navigateRight", size: 14 }) })
                ] })
        ] }));
    return disabled ? (_jsx(UiTooltip, { id: tooltipId, anchor: buttonComponent, content: intl.formatMessage({ id: "filters.locked.filter.tooltip" }), triggerBy: ["focus"], arrowPlacement: "top", showArrow: true, width: "same-as-anchor", anchorWrapperStyles: { width: "100%" } })) : (buttonComponent);
}
