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 { ZoomInIcon, ZoomOutIcon } from "@dynatrace/strato-icons";
import { TOOLBAR_MESSAGES } from "../constants.js";
import { useA11yToolbarTabIndex } from "../hooks/use-a11y-toolbar-tab-index.js";
const MapZoomInOutButtons = () => {
  const { current: map } = useMap();
  const isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();
  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();
  const zoomInButtonRef = useRef();
  const zoomButtonOutRef = useRef();
  const intl = useIntl();
  const tabIndexIn = useA11yToolbarTabIndex("zoom-in");
  const tabIndexOut = useA11yToolbarTabIndex("zoom-out");
  const handleZoomKeyboardMode = (event, zoomBehavior) => {
    if (event.code === "Enter") {
      handleZoomStepToolbarMode(zoomBehavior);
    }
  };
  const handleZoomStepToolbarMode = (zoomBehavior) => {
    if (zoomBehavior === "zoom-in") {
      map?.zoomIn();
    }
    if (zoomBehavior === "zoom-out") {
      map?.zoomOut();
    }
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    ChartToolbarRenderer.Control,
    {
      ref: zoomInButtonRef,
      prefixIcon: /* @__PURE__ */ React.createElement(ZoomInIcon, null),
      tooltipText: intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn),
      testId: "map-toolbar-zoom-in",
      onKeyDown: (event) => handleZoomKeyboardMode(event, "zoom-in"),
      onClick: () => handleZoomStepToolbarMode("zoom-in"),
      tabIndex: tabIndexIn,
      disabled: isMaxZoom
    }
  ), /* @__PURE__ */ React.createElement(
    ChartToolbarRenderer.Control,
    {
      ref: zoomButtonOutRef,
      prefixIcon: /* @__PURE__ */ React.createElement(ZoomOutIcon, null),
      tooltipText: intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut),
      testId: "map-toolbar-zoom-out",
      onKeyDown: (event) => handleZoomKeyboardMode(event, "zoom-out"),
      onClick: () => handleZoomStepToolbarMode("zoom-out"),
      tabIndex: tabIndexOut,
      disabled: isMinZoom
    }
  ));
};
export {
  MapZoomInOutButtons
};
//# sourceMappingURL=MapZoomInOutButtons.js.map
