import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { memo, useRef, useState, useEffect, useMemo } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Popover } from '../../../Tooltip/Popover.mjs';

"use strict";
const TableCellTooltip = memo(
  ({
    cellOptions,
    children,
    classes,
    className,
    data,
    disableSanitizeHtml,
    field,
    getActions,
    getTextColorForBackground,
    gridRef,
    height,
    placement,
    renderer: CellRenderer,
    rowIdx,
    style,
    theme,
    tooltipField,
    width = 300
  }) => {
    var _a, _b, _c;
    const rawValue = field.values[rowIdx];
    const tooltipCaretRef = useRef(null);
    const [hovered, setHovered] = useState(false);
    const [pinned, setPinned] = useState(false);
    const show = hovered || pinned;
    const dynamicHeight = (_b = (_a = tooltipField.config.custom) == null ? void 0 : _a.cellOptions) == null ? void 0 : _b.dynamicHeight;
    useEffect(() => {
      var _a2;
      if (pinned) {
        const gridRoot = (_a2 = gridRef.current) == null ? void 0 : _a2.element;
        const windowListener = (ev) => {
          if (ev.target === tooltipCaretRef.current) {
            return;
          }
          setPinned(false);
          window.removeEventListener("click", windowListener);
        };
        window.addEventListener("click", windowListener);
        const scrollListener = () => {
          setPinned(false);
        };
        gridRoot == null ? void 0 : gridRoot.addEventListener("scroll", scrollListener, { once: true });
        return () => {
          window.removeEventListener("click", windowListener);
          gridRoot == null ? void 0 : gridRoot.removeEventListener("scroll", scrollListener);
        };
      }
      return;
    }, [pinned, gridRef]);
    const rendererProps = useMemo(
      () => ({
        cellInspect: false,
        cellOptions,
        disableSanitizeHtml,
        field,
        frame: data,
        getActions,
        getTextColorForBackground,
        height,
        rowIdx,
        showFilters: false,
        theme,
        value: rawValue,
        width
      }),
      [
        cellOptions,
        data,
        disableSanitizeHtml,
        field,
        getActions,
        getTextColorForBackground,
        height,
        rawValue,
        rowIdx,
        theme,
        width
      ]
    );
    const cellElement = (_c = tooltipCaretRef.current) == null ? void 0 : _c.closest(".rdg-cell");
    if (rawValue === null || rawValue === void 0) {
      return children;
    }
    const onMouseLeave = () => setHovered(false);
    const onMouseEnter = () => setHovered(true);
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      cellElement && /* @__PURE__ */ jsx(
        Popover,
        {
          content: /* @__PURE__ */ jsx(CellRenderer, { ...rendererProps }),
          show,
          placement,
          wrapperClassName: classes.tooltipWrapper,
          className,
          style: { ...style, width, ...!dynamicHeight && { height } },
          referenceElement: cellElement,
          onMouseLeave,
          onMouseEnter,
          onClick: (ev) => ev.stopPropagation(),
          "data-testid": selectors.components.Panels.Visualization.TableNG.Tooltip.Wrapper
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          className: classes.tooltipCaret,
          ref: tooltipCaretRef,
          "data-testid": selectors.components.Panels.Visualization.TableNG.Tooltip.Caret,
          "aria-pressed": pinned,
          onClick: () => setPinned((prev) => !prev),
          onMouseLeave,
          onMouseEnter,
          onBlur: onMouseLeave,
          onFocus: onMouseEnter
        }
      ),
      children
    ] });
  }
);
TableCellTooltip.displayName = "TableCellTooltip";

export { TableCellTooltip };
//# sourceMappingURL=TableCellTooltip.mjs.map
