import { isUndefined } from "lodash-es";
import React, {
  forwardRef,
  useContext,
  useRef
} from "react";
import { Layer, Map, Source } from "react-map-gl/maplibre";
import { _useGraphSize as useGraphSize } from "@dynatrace/strato-components-preview/charts";
import { useMergeRefs } from "@dynatrace/strato-components-preview/core";
import { MapToolbar } from "./toolbar/MapToolbar.js";
import {
  DEFAULT_COUNTRIES_BORDER_COLOR,
  DEFAULT_COUNTRIES_FILL_COLOR
} from "../constants.js";
import { LayerIdsContext } from "../contexts/layer-ids.context.js";
import { getColorFromToken } from "../functions/get-color-from-token.js";
import { toMapBoxInitialViewState } from "../functions/to-mapbox-initial-view-state.js";
import { useActiveInteraction } from "../hooks/use-active-interaction.js";
import { useHoverInteraction } from "../hooks/use-hover-interaction.js";
import { useInitialViewState } from "../hooks/use-initial-view-state.js";
import { useMapConfig } from "../hooks/use-map-config.js";
import { useMapPerformance } from "../hooks/use-map-performance.js";
import { useMapSource } from "../hooks/use-map-source.js";
import { useOverlayEvents } from "../hooks/use-overlay-events.js";
import { useTooltipEventListeners } from "../hooks/use-tooltip-event-listeners.js";
import { defaultStyle } from "../map-styles/default-style.js";
const lineLayer = {
  id: "geojson-line",
  type: "line"
};
const fillLayer = {
  id: "geojson-fill",
  type: "fill"
};
const MapSource = () => {
  const mapData = useMapSource();
  return /* @__PURE__ */ React.createElement(Source, { id: "data", type: "geojson", data: mapData }, /* @__PURE__ */ React.createElement(
    Layer,
    {
      ...fillLayer,
      paint: {
        "fill-color": getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR)
      }
    }
  ), /* @__PURE__ */ React.createElement(
    Layer,
    {
      ...lineLayer,
      paint: {
        "line-color": getColorFromToken(DEFAULT_COUNTRIES_BORDER_COLOR)
      }
    }
  ));
};
const MapInteractions = ({ children }) => {
  useHoverInteraction();
  useActiveInteraction();
  return children;
};
const MapContent = forwardRef((props, forwardedRef) => {
  const {
    initialViewState: initialViewStateProp,
    children,
    style,
    mapStyle = defaultStyle,
    onViewStateChange,
    ...remaining
  } = props;
  const mapContainerRef = useRef(null);
  const mergedRefs = useMergeRefs([mapContainerRef, forwardedRef]);
  useTooltipEventListeners();
  const { toolbar: toolbarConfig, interactions: interactionsConfig } = useMapConfig();
  const layerIds = useContext(LayerIdsContext);
  const shouldRenderToolbar = !isUndefined(toolbarConfig) || !isUndefined(interactionsConfig);
  const { height: graphHeight, width: graphWidth } = useGraphSize();
  const {
    handleMouseEnter,
    handleMouseMove,
    handleMouseLeave,
    handleMouseClick,
    handleZoom,
    handleDrag
  } = useOverlayEvents();
  const initialViewState = useInitialViewState(initialViewStateProp);
  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      "data-testid": "map-container",
      ref: mergedRefs,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave
    },
    /* @__PURE__ */ React.createElement(
      Map,
      {
        onMove: (evt) => {
          onViewStateChange?.(evt.viewState);
        },
        initialViewState: toMapBoxInitialViewState(initialViewState),
        style: {
          width: graphWidth,
          height: `${graphHeight}px`,
          ...style
        },
        mapStyle,
        dragRotate: false,
        fadeDuration: 0,
        RTLTextPlugin: false,
        renderWorldCopies: false,
        interactiveLayerIds: layerIds,
        onMouseMove: (e) => handleMouseMove(e),
        onClick: (e) => handleMouseClick(e),
        onZoom: handleZoom,
        onDrag: handleDrag,
        onRender: () => onRenderHandler && onRenderHandler(),
        onLoad: () => onLoadHandler && onLoadHandler(),
        interactive: true,
        ...remaining
      },
      /* @__PURE__ */ React.createElement(MapSource, null),
      /* @__PURE__ */ React.createElement(MapInteractions, null, children),
      shouldRenderToolbar ? /* @__PURE__ */ React.createElement(MapToolbar, null) : null
    )
  );
});
MapContent["displayName"] = "MapContent";
export {
  MapContent
};
//# sourceMappingURL=MapContent.js.map
