import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2025 GoodData Corporation
import { useCallback, useRef, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { Bubble, DESCRIPTION_PANEL_ARROW_OFFSETS, DescriptionIcon, DescriptionPanelContent, UiTooltip, isActionKey, useIdPrefixed, } from "@gooddata/sdk-ui-kit";
const DESCRIPTION_PANEL_ALIGN_POINTS = [
    { align: "tr tl" },
    { align: "cr cl" },
    { align: "br bl" },
    { align: "tl tr" },
    { align: "cl cr" },
    { align: "bl br" },
    { align: "bl tl" },
    { align: "bc tc" },
    { align: "br tr" },
    { align: "tl bl" },
    { align: "tc bc" },
    { align: "tr br" },
];
export function DescriptionClickTrigger(props) {
    const { onOpen } = props;
    const [isOpen, setIsOpen] = useState(false);
    const intl = useIntl();
    const tooltipContentId = useIdPrefixed("description-tooltip");
    const iconRef = useRef(null);
    const switchIsOpen = useCallback(() => {
        setIsOpen((isOpen) => {
            if (!isOpen && onOpen) {
                onOpen();
            }
            return !isOpen;
        });
    }, [setIsOpen, onOpen]);
    const handleClose = useCallback(() => {
        setIsOpen(false);
    }, [setIsOpen]);
    const onKeyDown = useCallback((event) => {
        // This enables keyboard interaction events after focus
        if (isActionKey(event)) {
            event.preventDefault();
            switchIsOpen();
        }
    }, [switchIsOpen]);
    const iconClassName = cx("dash-item-action-description", "dash-item-action-placeholder", {
        "dash-item-action-description-active": isOpen,
    }, props.className);
    const title = intl.formatMessage({ id: "widget.options.description" });
    const bubbleClassName = cx("bubble-light", "gd-description-panel-bubble", {
        hidden: !isOpen,
    });
    const overlayClassName = cx("gd-description-panel-bubble-overlay", {
        hidden: !isOpen,
    });
    return (_jsxs(_Fragment, { children: [
            _jsx(UiTooltip, { triggerBy: ["hover", "focus"], arrowPlacement: "top-start", content: title, anchor: _jsx("div", { ref: iconRef, className: iconClassName, onClick: switchIsOpen, onKeyDown: onKeyDown, "aria-label": title, "aria-expanded": isOpen, "aria-controls": tooltipContentId, "aria-describedby": isOpen ? tooltipContentId : undefined, role: "button", tabIndex: 0, children: _jsx(DescriptionIcon, { className: "dash-item-action-description-trigger" }) }) }), _jsx(Bubble, { id: tooltipContentId, className: bubbleClassName, overlayClassName: overlayClassName, alignPoints: DESCRIPTION_PANEL_ALIGN_POINTS, arrowOffsets: DESCRIPTION_PANEL_ARROW_OFFSETS, arrowStyle: { display: "none" }, onClose: handleClose, closeOnOutsideClick: isOpen, ignoreClicksOn: [iconRef.current ?? undefined], closeOnParentScroll: false, alignTo: `.${props.className}`, ensureVisibility: true, children: isOpen ? _jsx(DescriptionPanelContent, { ...props }) : null }, isOpen ? "open" : "closed")] }));
}
//# sourceMappingURL=DescriptionClickTrigger.js.map