import { jsxs as p, Fragment as L, jsx as i } from "react/jsx-runtime";
import I, { useState as T } from "react";
import { AnimatePresence as M, motion as O } from "motion/react";
import { noop as j } from "es-toolkit/function";
import { usePopper as U } from "react-popper";
import s from "../../../../../utils/classNames.js";
import B from "../../../../overlay/OverlayTrigger.js";
import S from "../../../../tooltip/Tooltip.js";
import F, { useClickOutsideWithRef as q } from "../../../../../hooks/useClickOutside.js";
import z from "../../../../menuItems/MenuItemList.js";
import G from "../../../../menuItems/MenuItem.js";
import { isMobileScreen as J } from "../../../../../utils/deviceUtils.js";
const K = 800, Q = 100, n = {
  initial: { opacity: 0, y: 10 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 10 },
  transition: { duration: 0.08, ease: "easeOut" }
}, b = (m, o) => /* @__PURE__ */ i(
  B,
  {
    placement: S.TOP,
    delay: { show: K, hide: Q },
    overlay: /* @__PURE__ */ i(S, { id: "tooltip", width: "auto", children: o }),
    children: m
  }
), re = (m) => {
  const {
    onToggle: o = j,
    activeIcon: d,
    inactiveIcon: f,
    isActive: v = !1,
    panel: u,
    items: a,
    className: C,
    buttonClassName: w,
    tooltip: l,
    ...x
  } = m, [e, h] = T(!1), P = () => {
    const t = !e;
    h(t), o(t), g.current.blur();
  }, g = F(() => {
    e && u && (h(!1), o(!1), g.current.blur());
  }), [N, _] = T(null), [y, R] = T(null), { styles: k, attributes: E } = U(N, y, {
    placement: "top-end",
    modifiers: e && J() ? [
      {
        name: "offset",
        options: {
          offset: [-60, -60]
        }
      }
    ] : []
  });
  q(y, (t) => {
    const c = t.target instanceof Node ? t.target : null;
    c && N?.contains(c) || e && (h(!1), o(!1));
  });
  const D = s("MapSettingsTile", C), W = s("MapSettingsButton", e && "active", w), A = s(
    "MapSettingsTileIcon",
    "hover-scale-110",
    v ? "display-block" : "display-none",
    d?.props.className || ""
  ), H = s(
    "MapSettingsTileIcon",
    "hover-scale-110",
    v ? "display-none" : "display-block",
    f?.props.className || ""
  ), r = /* @__PURE__ */ p("div", { className: W, onClick: P, children: [
    d && I.cloneElement(d, {
      className: A
    }),
    f && I.cloneElement(f, {
      className: H
    })
  ] });
  return /* @__PURE__ */ p("div", { className: D, ref: g, ...x, children: [
    !a && /* @__PURE__ */ p(L, { children: [
      l && !e ? b(r, l) : r,
      /* @__PURE__ */ i("div", { className: "overflow-hidden", children: /* @__PURE__ */ i(M, { children: e && u && /* @__PURE__ */ i(
        O.div,
        {
          initial: n.initial,
          animate: n.animate,
          exit: n.exit,
          transition: n.transition,
          children: u
        }
      ) }) })
    ] }),
    a && /* @__PURE__ */ p("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
      l && !e ? b(r, l) : r,
      /* @__PURE__ */ i(M, { children: e && a && /* @__PURE__ */ i(
        O.div,
        {
          className: s("dropdown", e && "open"),
          initial: n.initial,
          animate: n.animate,
          exit: n.exit,
          transition: n.transition,
          children: /* @__PURE__ */ i(
            z,
            {
              className: "margin-bottom-5 shadow-smooth border-none",
              ref: R,
              style: { ...k.popper, minWidth: "180px" },
              ...E.popper,
              children: a?.map((t, c) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, c))
            }
          )
        }
      ) })
    ] })
  ] });
};
export {
  re as default
};
//# sourceMappingURL=MapSettingsTile.js.map
