import { jsx as r, Fragment as z, jsxs as i } from "react/jsx-runtime";
import { useState as v, useRef as x, useEffect as C } from "react";
import { useZoomContext as L } from "../../../../contexts/ZoomContext.js";
import { UIButton as T } from "../../../ui/Button.js";
import { c as e } from "../../../../ZoomTool.module-6c5eabbb.js";
import { UIDropDown as w } from "../../../ui/DropDown.js";
import { useLayoutContainer as I } from "../../../../contexts/LayoutContainerContext.js";
import { G as h } from "../../../../index-f4a9ae4d.js";
import { MenuItem as m } from "../MenuItem.js";
import { MenuSeparator as b } from "../MenuSeparator.js";
import A from "../../../ui/RPTooltip.js";
import { ZoomLevel as p } from "../../../../utils/types.js";
import { useLocalizationContext as N } from "../../../../contexts/LocalizationContext.js";
import { ChevronDownIcon as P } from "../../../icons/ChevronDownIcon.js";
const R = [50, 75, 100, 125, 150, 200, 300, 400], _ = ({ icon: l }) => {
  const { zoomLevel: u, setZoomLevel: n } = L(), { container: a, pagesRef: c } = I(), { localeMessages: o } = N(), [f, s] = v(0), d = x(
    new ResizeObserver((t) => {
      s(t[0].contentRect.height);
    })
  );
  return C(() => (c && d.current.observe(c), () => {
    d.current.disconnect();
  }), [c]), /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
    w,
    {
      container: a,
      triggerComponent: /* @__PURE__ */ r("div", { role: "button", children: /* @__PURE__ */ r(A, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ i(
        T,
        {
          className: e["rp-current-zoom-wrapper"],
          "aria-label": o == null ? void 0 : o.zoomSelectTooltip,
          children: [
            /* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: u }),
            /* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: "%" }),
            /* @__PURE__ */ r("div", { className: e["rp-zoom-level-icon"], children: l || /* @__PURE__ */ r(P, {}) })
          ]
        }
      ) }) }),
      style: { minWidth: "200px" },
      align: "center",
      children: /* @__PURE__ */ i(
        "div",
        {
          style: { maxHeight: `${f}px`, overflow: "auto" },
          className: e["rp-zoom-dropdown-content"],
          children: [
            /* @__PURE__ */ i(h, { children: [
              /* @__PURE__ */ r(m, { onClick: () => n(p.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
              /* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
              /* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
            ] }),
            /* @__PURE__ */ r(b, {}),
            /* @__PURE__ */ r(h, { children: R.map((t) => /* @__PURE__ */ i(m, { onClick: () => n(t), children: [
              t,
              " %"
            ] }, t)) })
          ]
        }
      )
    }
  ) });
};
export {
  _ as ZoomLevelTool
};
