import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { isEmpty } from "lodash-es";
import { IntlWrapper } from "@gooddata/sdk-ui";
import { UiIcon } from "../@ui/UiIcon/UiIcon.js";
import { Bubble } from "../Bubble/Bubble.js";
import { BubbleHoverTrigger } from "../Bubble/BubbleHoverTrigger.js";
import { useMediaQuery } from "../responsive/useMediaQuery.js";
import { RichText } from "../RichText/RichText.js";
import { ZOOM_THRESHOLD, useIsZoomed } from "../ZoomContext/ZoomContext.js";
/**
 * @internal
 */
export const DESCRIPTION_PANEL_ALIGN_POINTS = [
    { align: "cr cl" },
    { align: "tr tl" },
    { align: "br bl" },
    { align: "bc tc" },
    { align: "bl tl" },
    { align: "br tr" },
    { align: "tc bc" },
    { align: "tr br" },
    { align: "tl bl" },
    { align: "cl cr" },
    { align: "tl tr" },
    { align: "bl br" },
];
/**
 * @internal
 */
export const DESCRIPTION_PANEL_ARROW_OFFSETS = {
    "br tr": [0, 5],
    "bc tc": [0, 5],
    "bl tl": [0, 5],
    "tr br": [0, -5],
    "tc bc": [0, -5],
    "tl bl": [0, -5],
    "tr tl": [5, 0],
    "cr cl": [5, 0],
    "br bl": [5, 0],
    "tl tr": [-5, 0],
    "cl cr": [-5, 0],
    "bl br": [-5, 0],
};
/**
 * @internal
 */
export function DescriptionPanel(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(DescriptionPanelCore, { ...props }) }));
}
/**
 * @internal
 */
export function DescriptionPanelContent(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(DescriptionPanelContentCore, { ...props }) }));
}
/**
 * @internal
 */
export function DescriptionIcon({ className }) {
    const isMobileDevice = useMediaQuery("mobileDevice");
    return (_jsx("div", { className: cx("s-description-trigger", {
            "is-mobile": isMobileDevice,
            "gd-icon-circle-question-wrapper": !className,
        }, className), children: _jsx("div", { className: "gd-icon-circle-question" }) }));
}
function DescriptionPanelCore(props) {
    const { arrowOffsets = DESCRIPTION_PANEL_ARROW_OFFSETS } = props;
    return (_jsxs(BubbleHoverTrigger, { onBubbleOpen: props.onBubbleOpen, showDelay: 0, eventsOnBubble: true, children: [
            _jsx(DescriptionIcon, { className: props.className }), _jsx(Bubble, { className: "bubble-light gd-description-panel-bubble", alignPoints: DESCRIPTION_PANEL_ALIGN_POINTS, arrowOffsets: arrowOffsets, arrowStyle: { display: "none" }, ensureVisibility: true, children: _jsx(DescriptionPanelContentCore, { ...props }) })
        ] }));
}
function DescriptionPanelContentCore({ title, description, isLocked, useReferences = false, LoadingComponent, filters, separators, execConfig, id, }) {
    const isZoomed = useIsZoomed(ZOOM_THRESHOLD); // ignore slight zoom in
    const className = cx("gd-description-panel s-gd-description-panel", {
        zoomed: isZoomed,
    });
    return (_jsxs("div", { className: className, id: id, children: [!isEmpty(title) && (_jsxs("div", { className: "gd-description-panel-title", children: [isLocked ? _jsx(UiIcon, { type: "lock", size: 16, color: "complementary-6" }) : null, title] })), !isEmpty(description) && (_jsx("div", { className: "gd-description-panel-content", children: _jsx(RichText, { value: description ?? "", renderMode: "view", referencesEnabled: useReferences, filters: filters, separators: separators, LoadingComponent: LoadingComponent, execConfig: execConfig }) }))] }));
}
