import { jsxs as h, jsx as r, Fragment as y } from "react/jsx-runtime";
import E, { useState as b, useRef as C, useCallback as u } from "react";
import m from "@mui/material/Menu";
import P from "@mui/material/Divider";
import I from "@mui/material/MenuItem";
import W from "@mui/material/ListItemIcon";
import O from "@mui/material/ListItemText";
import { LuChevronRight as N, LuChevronDown as R } from "react-icons/lu";
import { H as L } from "./HotkeyHint-6SOi-MaU.js";
import A from "@mui/material/Box";
import B from "@mui/material/Button";
import D from "@mui/material/ButtonGroup";
import { toMuiColor as j, toMuiVariant as w, toMuiSize as H } from "./types.js";
function g({ item: o, onClose: i, submenuDirection: n = "right" }) {
  const [c, d] = b(!1), f = C(null), a = () => d(!0), t = () => d(!1), e = () => {
    o.onClick && (o.onClick(), i());
  };
  return o.children?.length ? /* @__PURE__ */ h(y, { children: [
    /* @__PURE__ */ h(
      I,
      {
        ref: f,
        disabled: o.disabled,
        onMouseEnter: a,
        onMouseLeave: t,
        onClick: a,
        sx: {
          fontSize: "var(--ov-text-sm)",
          color: o.color === "danger" || o.color === "error" ? "var(--ov-danger-default)" : "var(--ov-fg-default)",
          display: "flex",
          justifyContent: "space-between",
          gap: 0.5
        },
        children: [
          o.icon && /* @__PURE__ */ r(W, { sx: { color: "inherit", minWidth: 24 }, children: o.icon }),
          /* @__PURE__ */ r(O, { children: o.label }),
          /* @__PURE__ */ r(N, { size: 14 })
        ]
      }
    ),
    /* @__PURE__ */ r(
      m,
      {
        open: c,
        anchorEl: f.current,
        onClose: t,
        anchorOrigin: {
          vertical: "top",
          horizontal: n === "left" ? "left" : "right"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: n === "left" ? "right" : "left"
        },
        slotProps: {
          paper: {
            sx: {
              minWidth: 160,
              bgcolor: "var(--ov-bg-surface)",
              border: "1px solid var(--ov-border-default)",
              pointerEvents: "auto"
            },
            onMouseEnter: a,
            onMouseLeave: t
          }
        },
        sx: { pointerEvents: "none" },
        disableAutoFocus: !0,
        disableEnforceFocus: !0,
        children: o.children.flatMap((l) => {
          const v = [
            /* @__PURE__ */ r(g, { item: l, onClose: i, submenuDirection: n }, l.key)
          ];
          return l.dividerAfter && v.push(
            /* @__PURE__ */ r(
              "hr",
              {
                style: {
                  margin: "4px 0",
                  border: "none",
                  borderTop: "1px solid var(--ov-border-muted)"
                }
              },
              `${l.key}-divider`
            )
          ), v;
        })
      }
    )
  ] }) : /* @__PURE__ */ h(
    I,
    {
      ref: f,
      disabled: o.disabled,
      onClick: e,
      sx: {
        fontSize: "var(--ov-text-sm)",
        color: o.color === "danger" || o.color === "error" ? "var(--ov-danger-default)" : "var(--ov-fg-default)",
        gap: 0.5
      },
      children: [
        o.icon && /* @__PURE__ */ r(W, { sx: { color: "inherit", minWidth: 24 }, children: o.icon }),
        /* @__PURE__ */ r(O, { children: o.label }),
        o.shortcut && /* @__PURE__ */ r(L, { keys: o.shortcut })
      ]
    }
  );
}
g.displayName = "NestedMenuItem";
function T({
  items: o,
  children: i,
  onOpenChange: n
}) {
  const [c, d] = b(null), f = u((t) => {
    t.preventDefault(), t.stopPropagation(), d({ top: t.clientY, left: t.clientX }), n?.(!0);
  }, [n]), a = u(() => {
    d(null), n?.(!1);
  }, [n]);
  return /* @__PURE__ */ h(y, { children: [
    /* @__PURE__ */ r("span", { onContextMenu: f, style: { display: "contents" }, children: i }),
    /* @__PURE__ */ r(
      m,
      {
        open: c !== null,
        onClose: a,
        anchorReference: "anchorPosition",
        anchorPosition: c ?? void 0,
        slotProps: {
          paper: {
            sx: {
              minWidth: 180,
              bgcolor: "var(--ov-bg-surface)",
              border: "1px solid var(--ov-border-default)"
            }
          }
        },
        children: o.map((t) => /* @__PURE__ */ h(E.Fragment, { children: [
          /* @__PURE__ */ r(g, { item: t, onClose: a }),
          t.dividerAfter && /* @__PURE__ */ r(P, {})
        ] }, t.key))
      }
    )
  ] });
}
T.displayName = "ContextMenu";
const K = {
  "bottom-start": { anchor: { vertical: "bottom", horizontal: "left" }, transform: { vertical: "top", horizontal: "left" } },
  "bottom-end": { anchor: { vertical: "bottom", horizontal: "right" }, transform: { vertical: "top", horizontal: "right" } },
  "top-start": { anchor: { vertical: "top", horizontal: "left" }, transform: { vertical: "bottom", horizontal: "left" } },
  "top-end": { anchor: { vertical: "top", horizontal: "right" }, transform: { vertical: "bottom", horizontal: "right" } }
};
function V({
  items: o,
  trigger: i,
  placement: n = "bottom-start",
  submenuDirection: c,
  width: d
}) {
  const [f, a] = b(!1), t = C(null), e = u(() => a(!1), []), l = u(() => a((p) => !p), []), { anchor: v, transform: k } = K[n], M = c ?? (n.endsWith("-end") ? "left" : "right");
  return /* @__PURE__ */ h(y, { children: [
    /* @__PURE__ */ r(
      "span",
      {
        ref: t,
        onClick: l,
        style: { cursor: "pointer", display: "inline-flex" },
        children: i
      }
    ),
    /* @__PURE__ */ r(
      m,
      {
        open: f,
        anchorEl: t.current,
        onClose: e,
        anchorOrigin: v,
        transformOrigin: k,
        slotProps: {
          paper: {
            sx: {
              minWidth: d ?? 180,
              bgcolor: "var(--ov-bg-surface)",
              border: "1px solid var(--ov-border-default)"
            }
          }
        },
        children: o.flatMap((p) => {
          const x = [
            /* @__PURE__ */ r(g, { item: p, onClose: e, submenuDirection: M }, p.key)
          ];
          return p.dividerAfter && x.push(/* @__PURE__ */ r(P, {}, `${p.key}-divider`)), x;
        })
      }
    )
  ] });
}
V.displayName = "DropdownMenu";
function _({ menus: o, sx: i }) {
  const [n, c] = b(null), d = C({}), f = u(() => c(null), []), a = u((e) => {
    c((l) => l === e ? null : e);
  }, []), t = u((e) => {
    n !== null && c(e);
  }, [n]);
  return /* @__PURE__ */ r(
    A,
    {
      sx: {
        display: "flex",
        alignItems: "center",
        height: 32,
        bgcolor: "var(--ov-bg-surface)",
        borderBottom: "1px solid var(--ov-border-default)",
        ...typeof i == "object" && !Array.isArray(i) ? i : {}
      },
      children: o.map((e) => /* @__PURE__ */ h(E.Fragment, { children: [
        /* @__PURE__ */ r(
          A,
          {
            component: "button",
            ref: (l) => {
              d.current[e.key] = l;
            },
            onClick: () => a(e.key),
            onMouseEnter: () => t(e.key),
            sx: {
              border: "none",
              background: n === e.key ? "var(--ov-state-hover)" : "transparent",
              color: "var(--ov-fg-default)",
              fontSize: "var(--ov-text-sm)",
              fontFamily: "var(--ov-font-ui)",
              px: 1.5,
              py: 0.5,
              cursor: "pointer",
              borderRadius: "4px",
              "&:hover": { bgcolor: "var(--ov-state-hover)" }
            },
            children: e.label
          }
        ),
        /* @__PURE__ */ r(
          m,
          {
            open: n === e.key,
            anchorEl: d.current[e.key],
            onClose: f,
            anchorOrigin: { vertical: "bottom", horizontal: "left" },
            transformOrigin: { vertical: "top", horizontal: "left" },
            slotProps: {
              paper: {
                sx: {
                  minWidth: 200,
                  bgcolor: "var(--ov-bg-surface)",
                  border: "1px solid var(--ov-border-default)"
                }
              }
            },
            children: e.items.map((l) => /* @__PURE__ */ h(E.Fragment, { children: [
              /* @__PURE__ */ r(g, { item: l, onClose: f }),
              l.dividerAfter && /* @__PURE__ */ r(P, {})
            ] }, l.key))
          }
        )
      ] }, e.key))
    }
  );
}
_.displayName = "MenuBar";
function $({
  options: o,
  onSelect: i,
  defaultIndex: n = 0,
  color: c = "primary",
  emphasis: d = "soft",
  size: f = "sm"
}) {
  const [a, t] = b(n), [e, l] = b(!1), v = C(null), k = j(c), M = w(d), p = H(f), x = u(() => {
    const s = o[a];
    s && !s.disabled && i(s);
  }, [o, a, i]), F = u((s) => {
    t(s), l(!1), i(o[s]);
  }, [o, i]), z = o[a];
  return /* @__PURE__ */ h(y, { children: [
    /* @__PURE__ */ h(
      D,
      {
        ref: v,
        variant: M,
        color: k,
        size: p,
        children: [
          /* @__PURE__ */ r(
            B,
            {
              onClick: x,
              disabled: z?.disabled,
              startIcon: z?.icon,
              children: z?.label
            }
          ),
          /* @__PURE__ */ r(
            B,
            {
              onClick: () => l((s) => !s),
              sx: { px: 0.5, minWidth: "auto" },
              "aria-label": "Select option",
              children: /* @__PURE__ */ r(R, { size: 14 })
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ r(
      m,
      {
        open: e,
        anchorEl: v.current,
        onClose: () => l(!1),
        anchorOrigin: { vertical: "bottom", horizontal: "left" },
        transformOrigin: { vertical: "top", horizontal: "left" },
        slotProps: {
          paper: {
            sx: {
              minWidth: 160,
              bgcolor: "var(--ov-bg-surface)",
              border: "1px solid var(--ov-border-default)"
            }
          }
        },
        children: o.map((s, S) => /* @__PURE__ */ h(
          I,
          {
            disabled: s.disabled,
            selected: S === a,
            onClick: () => F(S),
            sx: { fontSize: "var(--ov-text-sm)" },
            children: [
              s.icon && /* @__PURE__ */ r(W, { sx: { minWidth: 28 }, children: s.icon }),
              /* @__PURE__ */ r(O, { children: s.label })
            ]
          },
          s.key
        ))
      }
    )
  ] });
}
$.displayName = "SplitButton";
export {
  T as ContextMenu,
  V as DropdownMenu,
  _ as MenuBar,
  g as NestedMenuItem,
  $ as SplitButton
};
