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 { Bubble } from "../../Bubble/Bubble.js";
import { BubbleHoverTrigger } from "../../Bubble/BubbleHoverTrigger.js";
import { Typography } from "../../Typography/Typography.js";
const BUTTON_TOOLTIP_ALIGN_POINTS = [
    { align: "cr cl", offset: { x: 0, y: 0 } },
    { align: "cl cr", offset: { x: 0, y: 0 } },
];
/**
 * @internal
 */
export function DialogListHeader({ className, gdIconName = "gd-icon-plus", title, buttonTitle, buttonDisabled, buttonTooltipText, onButtonClick, }) {
    const headerClassNames = cx("gd-dialog-list-header s-dialog-list-header", className);
    const buttonClassNames = cx("gd-button", "gd-button-link", gdIconName, "s-dialog-list-header-button", {
        disabled: buttonDisabled,
    });
    const onClick = useCallback(() => !buttonDisabled && onButtonClick?.(), [buttonDisabled, onButtonClick]);
    return (_jsxs("div", { role: "dialog-list-header", className: headerClassNames, children: [title ? (_jsx("div", { children: _jsx(Typography, { tagName: "h3", children: title }) })) : null, _jsx("div", { className: "gd-dialog-list-header-divider" }), buttonTitle ? (_jsx("div", { className: "gd-dialog-list-header-button", children: _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [
                        _jsx("button", { type: "button", className: buttonClassNames, disabled: buttonDisabled, onClick: onClick, children: buttonTitle }), buttonTooltipText ? (_jsx(Bubble, { className: "bubble-primary", alignPoints: BUTTON_TOOLTIP_ALIGN_POINTS, children: buttonTooltipText })) : null] }) })) : null] }));
}
