import React, { useRef } from "react";
import {
  _ChartTooltip as ChartTooltip,
  _useChartActionsMenu as useChartActionsMenu
} from "@dynatrace/strato-components-preview/charts";
import {
  useMapTooltipPinnedState,
  useMapTooltipState
} from "../../store/selectors.js";
const BubbleLayerTooltip = (props) => {
  const { layerId, tooltipTemplate } = props;
  const {
    selectedItem: selectedItemId,
    actionsMenuRef,
    updateSelectedItem,
    onLeave
  } = useChartActionsMenu();
  const tooltipRef = useRef(null);
  const { hoveredLayerId, data, position, visible, enabled } = useMapTooltipState();
  const pinned = useMapTooltipPinnedState();
  const closestPoint = useRef();
  const remainingPoints = useRef([]);
  const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
  if (!tooltipTemplate || forceHideTooltip || !position) {
    return null;
  }
  if (!pinned && data?.[0]) {
    const sanitizedData = data.map((bubbleProps) => {
      const {
        __color: color,
        __radius: radius,
        data: customData
      } = bubbleProps;
      return {
        color,
        radius,
        data: customData
      };
    });
    closestPoint.current = sanitizedData[0];
    remainingPoints.current = sanitizedData.slice(1);
  }
  return /* @__PURE__ */ React.createElement(
    ChartTooltip,
    {
      position,
      pinned,
      ref: tooltipRef,
      onMouseLeave: onLeave,
      actionSelectionValue: {
        selectedItemId,
        actionsMenuRef,
        updateSelectedItem
      }
    },
    closestPoint.current ? tooltipTemplate(closestPoint.current, remainingPoints.current) : null
  );
};
BubbleLayerTooltip["displayName"] = "BubbleLayerTooltip";
export {
  BubbleLayerTooltip
};
//# sourceMappingURL=BubbleLayerTooltip.js.map
