import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { forwardRef, useLayoutEffect, useState } from "react";
import { bem } from "../@utils/bem.js";
import { UiIcon } from "../UiIcon/UiIcon.js";
import { UiTooltip } from "../UiTooltip/UiTooltip.js";
const { b, e } = bem("gd-ui-kit-tag");
/**
 * @internal
 */
export const UiTag = forwardRef(function UiTag({ label, size = "small", variant = "solid", tabIndex, deleteTabIndex, accessibilityConfig, isDisabled, isDeletable, dataTestId, onClick, onDelete, onDeleteKeyDown, }, ref) {
    const [labelRef, setLabelRef] = useState(null);
    const [hasTooltip, setHasTooltip] = useState(false);
    const { ariaLabel, ariaLabelledBy, deleteAriaLabel } = accessibilityConfig ?? {};
    useLayoutEffect(() => {
        if (labelRef && labelRef.offsetWidth < labelRef.scrollWidth) {
            setHasTooltip(true);
        }
        else {
            setHasTooltip(false);
        }
    }, [labelRef]);
    const button = (_jsx("button", { ref: ref, tabIndex: tabIndex, "data-testid": dataTestId, className: e("trigger", { isDeletable, isDisabled }), disabled: isDisabled, "aria-disabled": isDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onClick: onClick, children: _jsx("span", { className: e("label"), ref: setLabelRef, children: label }) }));
    return (_jsxs("div", { className: b({ size, variant }), children: [hasTooltip ? (_jsx(UiTooltip, { anchor: button, content: _jsx("div", { className: e("tooltip"), children: label }), triggerBy: ["hover"], arrowPlacement: "top" })) : (button), isDeletable && !isDisabled ? (_jsx("button", { tabIndex: deleteTabIndex, "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, { size: 14, type: "cross", ariaHidden: true, color: variant === "decorated" ? "complementary-0" : "complementary-6" }) }) })) : null] }));
});
//# sourceMappingURL=UiTag.js.map