import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ShortenedText } from "../../../ShortenedText/ShortenedText.js";
import { UiIcon } from "../../UiIcon/UiIcon.js";
import { UiTooltip } from "../../UiTooltip/UiTooltip.js";
import { e } from "../treeviewBem.js";
/**
 * @internal
 */
export function DefaultUiTreeViewItemComponent({ item, type, level, isExpanded, isFocused, isSelected, isCompact, onToggle, onSelect, ariaAttributes, }) {
    return (_jsxs("div", { ...ariaAttributes, style: defineVariables(level), className: e("item", {
            isFocused,
            isSelected,
            isCompact: isCompact ?? false,
            isExpanded: isExpanded ?? false,
            isDisabled: !!item.isDisabled,
        }), onClick: item.isDisabled ? undefined : onSelect, children: [type === "group" ? (_jsx("div", { className: e("item__item-arrow"), onClick: (e) => {
                    onToggle(e, !isExpanded);
                    e.stopPropagation();
                    e.preventDefault();
                }, children: _jsx(UiIcon, { type: "navigateRight", size: 16, color: "complementary-7" }) })) : null, item.icon ? (_jsx("div", { className: e("item__item-icon"), children: _jsx(UiIcon, { type: item.icon, size: 16, color: "complementary-7" }) })) : null, _jsx(ShortenedText, { className: e("item__item-title"), ellipsisPosition: "end", children: item.stringTitle }), item.tooltip ? (_jsx(UiTooltip, { anchor: _jsx("div", { className: e("item__item-explanation"), children: _jsx(UiIcon, { type: "question", size: 14, color: "complementary-7" }) }), content: item.tooltip, triggerBy: ["hover", "focus"], arrowPlacement: "left", optimalPlacement: true, width: 200 })) : null] }));
}
function defineVariables(level) {
    return { "--ui-treeview-item-level": level };
}
