import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useLayoutEffect, useRef, useState } from "react";
import { bem } from "../@utils/bem.js";
import { UiIcon } from "../UiIcon/UiIcon.js";
const { b, e } = bem("gd-ui-kit-chip");
/**
 * @internal
 */
export function UiChip({ label, tag, isDeletable = false, isActive = false, isLocked = false, iconBefore, onClick, onDelete, onDeleteKeyDown, accessibilityConfig, dataTestId, buttonRef, }) {
    const [styleObj, setStyleObj] = useState();
    const defaultButtonRef = useRef(null);
    const effectiveButtonRef = buttonRef || defaultButtonRef;
    useLayoutEffect(() => {
        if (effectiveButtonRef.current) {
            // Reset width to auto to calculate the width of the label and tag
            effectiveButtonRef.current.style.width = "auto";
            const width = effectiveButtonRef.current.getBoundingClientRect().width;
            setStyleObj({ width });
        }
    }, [label, tag, effectiveButtonRef]);
    const { isExpanded, popupId, ariaLabel, ariaLabelledBy, deleteAriaLabel } = accessibilityConfig ?? {};
    const ariaDropdownProps = {
        ...(popupId && isExpanded ? { "aria-controls": popupId } : {}),
        ...(popupId ? { "aria-haspopup": !!popupId } : {}),
        ...(isExpanded === undefined ? {} : { "aria-expanded": isExpanded }),
    };
    return (_jsxs("div", { className: b(), children: [_jsxs("button", { "data-testid": dataTestId, "aria-expanded": isActive, className: e("trigger", { isDeletable, isActive, isLocked }), disabled: isLocked, onClick: onClick, style: { ...styleObj }, ref: effectiveButtonRef, "aria-disabled": isLocked, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...ariaDropdownProps, children: [iconBefore ? (_jsx("span", { className: e("icon-before"), children: _jsx(UiIcon, { type: iconBefore, color: "primary", size: 15, ariaHidden: true }) })) : null, _jsx("span", { className: e("label"), children: label }), tag ? _jsx("span", { className: e("tag"), children: tag }) : null, isLocked ? (_jsx("span", { className: e("icon-lock"), children: _jsx(UiIcon, { type: "lock", color: "complementary-6", size: 14, ariaHidden: true }) })) : (_jsx("span", { className: e("icon-chevron", { isActive }), children: _jsx(UiIcon, { type: isActive ? "chevronUp" : "chevronDown", color: "complementary-7", size: 8, ariaHidden: true }) }))] }), isDeletable ? (_jsx("button", { "data-testid": dataTestId ? `${dataTestId}-delete-button` : undefined, "aria-label": deleteAriaLabel, className: e("delete"), onClick: onDelete, onKeyDown: onDeleteKeyDown, children: _jsx("span", { className: e("icon-delete"), children: _jsx(UiIcon, { type: "cross", color: "complementary-6", size: 14, ariaHidden: true }) }) })) : null] }));
}
//# sourceMappingURL=UiChip.js.map