import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { useState } from "react";
import classNames from "classnames";
import { Bubble, Button } from "@gooddata/sdk-ui-kit";
import { isDarkTheme, useTheme } from "@gooddata/sdk-ui-theme-provider";
import { simplifyText } from "@gooddata/util";
export function Parameter({ name, description, detailContent, detailTrigger, iconClassName, onAdd, intl, }) {
    const [displayHelp, setDisplayHelp] = useState(false);
    const theme = useTheme();
    const isDark = theme && isDarkTheme(theme);
    const descriptionSuffix = description ? simplifyText("_" + description) : "";
    const id = simplifyText(name) + descriptionSuffix;
    const itemClassNames = classNames("gd-list-item gd-menu-item", `s-parameter-${id}`, iconClassName);
    const addButtonLabel = intl.formatMessage({
        id: "configurationPanel.drillIntoUrl.editor.addParameterButtonLabel",
    });
    return (_jsxs("div", { id: id, className: itemClassNames, onClick: () => onAdd(), children: [
            _jsx("span", { className: "gd-parameter-title", children: name }), description ? _jsxs("span", { className: "addon s-parameter-description", children: ["(", description, ")"] }) : null, _jsx(Button, { className: "gd-button gd-button-link s-parameter-add-button", value: addButtonLabel }), detailTrigger ? (_jsx("div", { className: "gd-list-item-tooltip", onClick: (event) => event.stopPropagation(), children: detailTrigger })) : detailContent ? (_jsxs("div", { className: "gd-list-item-tooltip", children: [
                    _jsx("span", { className: "gd-icon-circle-question gd-list-item-tooltip-icon s-parameter-help-icon", onMouseEnter: () => setDisplayHelp(true), onMouseLeave: () => setDisplayHelp(false) }), displayHelp ? (_jsx(Bubble, { className: `themed-bubble ${isDark ? "bubble-primary" : "bubble-light"}`, alignTo: `#${id}`, alignPoints: [{ align: "cr tl" }], children: detailContent })) : null] })) : null] }));
}
