import React, { useRef } from "react";
import { useIntl } from "react-intl";
import { useMap } from "react-map-gl/maplibre";
import { _ChartToolbarRenderer as ChartToolbarRenderer } from "@dynatrace/strato-components-preview/charts";
import { ZoomToFitIcon } from "@dynatrace/strato-icons";
import { FIT_BOUNDS_OPTIONS } from "../../../constants.js";
import { useDataBoundingBox } from "../../../hooks/use-data-bounding-box.js";
import { TOOLBAR_MESSAGES } from "../constants.js";
import { useA11yToolbarTabIndex } from "../hooks/use-a11y-toolbar-tab-index.js";
const MapZoomToFitButton = () => {
  const resetButtonRef = useRef();
  const { current: map } = useMap();
  const tabIndex = useA11yToolbarTabIndex("zoom-to-fit");
  const intl = useIntl();
  const boundingBox = useDataBoundingBox();
  const handleZoomToFit = () => {
    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);
  };
  const handleKeyDown = (event) => {
    if (event.code === "Enter") {
      handleZoomToFit();
    }
  };
  return /* @__PURE__ */ React.createElement(
    ChartToolbarRenderer.Control,
    {
      ref: resetButtonRef,
      prefixIcon: /* @__PURE__ */ React.createElement(ZoomToFitIcon, null),
      tooltipText: intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit),
      testId: "map-toolbar-zoom-to-fit",
      onKeyDown: handleKeyDown,
      onClick: handleZoomToFit,
      tabIndex
    }
  );
};
MapZoomToFitButton["displayName"] = "MapZoomToFit";
export {
  MapZoomToFitButton
};
//# sourceMappingURL=MapZoomToFitButton.js.map
