import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { objRefToString, widgetRef } from "@gooddata/sdk-model";
import { Bubble } from "@gooddata/sdk-ui-kit";
import { simplifyText } from "@gooddata/util";
import { IGNORED_CONFIGURATION_MENU_CLICK_CLASS } from "../../../../constants/classes.js";
const alignPoints = [
    { align: "tr tl" },
    { align: "br bl" },
    { align: "tl tr" },
    { align: "bl br" },
    { align: "tr tr" },
    { align: "br br" },
    { align: "bc tc" }, // align arrow to middle, above the widget button (mobile view)
    { align: "tc bc" }, // align arrow to middle, below the widget button (mobile view)
];
const arrowDirections = {
    "tr tr": "right",
    "br br": "right",
    "bc tc": "top",
    "tc bc": "bottom",
};
const flexibleArrowOffsets = {
    "tr tl": [16, -2],
    "br bl": [16, 27],
    "tl tr": [-16, -2],
    "bl br": [-16, 27],
    "bc tc": [0, 12],
    "tc bc": [0, -12],
};
export function DashboardInsightMenuBubble({ onClose, isSubmenu, widget, children, }) {
    const widgetRefAsString = objRefToString(widgetRef(widget));
    return (_jsx(Bubble, { alignTo: `.dash-item-action-widget-options-${simplifyText(widgetRefAsString)}`, alignPoints: alignPoints, arrowDirections: arrowDirections, arrowOffsets: flexibleArrowOffsets, className: cx("bubble-light", "gd-configuration-bubble", "edit-insight-config", "s-edit-insight-config", "edit-insight-config-title-1-line", isSubmenu ? "edit-insight-config-arrow-submenu-color" : "edit-insight-config-arrow-color"), closeOnOutsideClick: true, onClose: onClose, overlayClassName: "gd-configuration-bubble-wrapper sdk-edit-mode-on", ignoreClicksOnByClass: [`.${IGNORED_CONFIGURATION_MENU_CLICK_CLASS}`], children: children }));
}
