import { j as s } from "./jsx-runtime-BbD0H88J.js";
import { C as r, E as y, A as $, T as z, v as G } from "./css-BkBrZtKZ.js";
import { useState as A, useCallback as C } from "react";
import { B as w } from "./Button-DLtxKGH5.js";
import { a as B } from "./Box-DLO7l9hM.js";
import { c as H, z as U, B as q, D as J, E as Q, L as W } from "./Text-XeD58Fq8.js";
import { a as Y, C as K } from "./Menu-GBo3ayoP.js";
/* empty css                 */
import { d as ee, c as te } from "./Animated-C4xrEVd-.js";
import { T as ne, E as oe, c as se } from "./Editable-DjQORuR1.js";
import { C as k, u as le } from "./types-B5-Tni3G.js";
import "./Provider-BkxUzTWS.js";
import { z as p } from "zod";
const [re, M] = H({
  defaultValue: { tabs: [] },
  displayName: "Tabs.Context"
}), I = re, _ = "tabs-selector", V = ({
  className: o,
  altColor: t = !1,
  size: e = "medium",
  direction: l = "x",
  contextMenu: n,
  addTooltip: a,
  actions: c,
  ...d
}) => {
  const {
    tabs: g,
    selected: j,
    onSelect: S,
    onClose: x,
    closable: E,
    onDragEnd: T,
    onDragStart: D,
    onDrop: m,
    onRename: b,
    onCreate: h
  } = M(), v = Y(), [N, f] = A(!1);
  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
    n != null && /* @__PURE__ */ s.jsx(
      K,
      {
        style: { height: "fit-content" },
        ...v,
        menu: n
      }
    ),
    /* @__PURE__ */ s.jsxs(
      B,
      {
        className: r(
          r.B(_),
          o,
          v.className,
          N && r.M("drag-over")
        ),
        size: e,
        align: "center",
        justify: "between",
        empty: !0,
        direction: l,
        onContextMenu: v.open,
        onDrop: m,
        ...d,
        children: [
          /* @__PURE__ */ s.jsxs(B, { direction: l, className: r.BE(_, "tabs"), empty: !0, children: [
            g.map((i) => /* @__PURE__ */ s.jsx(
              ue,
              {
                selected: j,
                altColor: t,
                onSelect: S,
                onClose: x,
                onDragStart: D,
                onDragEnd: T,
                onRename: b,
                closable: i.closable ?? E,
                size: e,
                ...i
              },
              i.tabKey
            )),
            m != null && /* @__PURE__ */ s.jsx(
              B,
              {
                onDragOver: () => f(!0),
                onDragLeave: () => f(!1),
                onDragEnd: () => f(!1),
                onDrop: () => f(!1),
                grow: !0
              }
            )
          ] }),
          (c != null || h != null) && /* @__PURE__ */ s.jsxs(B, { className: r.BE(_, "actions"), children: [
            h != null && /* @__PURE__ */ s.jsx(
              w,
              {
                size: e,
                sharp: !0,
                onClick: h,
                tooltip: a,
                variant: "text",
                children: /* @__PURE__ */ s.jsx(U, {})
              }
            ),
            c
          ] })
        ]
      }
    )
  ] });
}, ae = ({ unsavedChanges: o, ...t }) => {
  const e = /* @__PURE__ */ s.jsx(J, { ...t });
  return o ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
    /* @__PURE__ */ s.jsx(Q, {}),
    e
  ] }) : e;
}, R = r.BE("tabs-selector", "btn"), ce = (o) => {
  if (!(o.target instanceof HTMLElement)) return "right";
  const t = o.target.closest(`.${R}`);
  if (t == null) return "right";
  const e = y.construct(t), l = $.construct(o);
  return z.Scale.scale(y.left(e), y.right(e)).scale(0, 1).pos(l.x) < 0.5 ? "left" : "right";
}, ie = ({ loading: o, icon: t, level: e = "p" }) => (o && (t = /* @__PURE__ */ s.jsx(W, {})), q(t, {
  className: r.BE(_, "icon"),
  style: {
    color: r.colorVar(9),
    height: r.levelSizeVar(e),
    width: r.levelSizeVar(e)
  }
})), ue = ({
  selected: o,
  altColor: t = !1,
  onSelect: e,
  onClose: l,
  tabKey: n,
  name: a,
  onDragStart: c,
  onDragEnd: d,
  onRename: g,
  closable: j = !0,
  icon: S,
  size: x,
  editable: E = !0,
  unsavedChanges: T = !1,
  loading: D = !1,
  onDrop: m
}) => {
  const b = C(
    (u) => c?.(u, { tabKey: n, name: a }),
    [c, n, a]
  ), h = C(
    (u) => d?.(u, { tabKey: n, name: a }),
    [d, n, a]
  ), v = C(
    (u) => {
      u.preventDefault(), u.stopPropagation(), l?.(n);
    },
    [l, n]
  ), N = C(() => e?.(n), [e, n]), [f, i] = A(null), L = C(
    (u) => {
      i(ce(u));
    },
    [i, m]
  ), P = C(
    (u) => {
      m?.(u), i(null);
    },
    [m, i]
  ), O = o === n, X = k[x];
  return /* @__PURE__ */ s.jsxs(
    w,
    {
      el: "div",
      size: x,
      id: n,
      variant: "text",
      sharp: !0,
      className: r(
        ee,
        R,
        O && te,
        r.selected(O),
        r.altColor(t),
        j && l != null && r.M("closable"),
        r.editable(E && g != null),
        f != null && r.M("drag-over"),
        f != null && r.loc(f)
      ),
      draggable: !0,
      justify: "center",
      align: "center",
      empty: !0,
      tabIndex: 0,
      preventClick: O,
      onClick: N,
      onDragOver: L,
      onDrop: P,
      onDragLeave: () => i(null),
      onDragStart: b,
      onDragEnd: (u) => {
        i(null), h(u);
      },
      bordered: !1,
      rounded: !1,
      children: [
        /* @__PURE__ */ s.jsx(ie, { loading: D, icon: S, level: X }),
        /* @__PURE__ */ s.jsx(
          de,
          {
            name: a,
            tabKey: n,
            onRename: g,
            editable: E,
            level: k[x]
          }
        ),
        j && l != null && /* @__PURE__ */ s.jsx(
          w,
          {
            "aria-label": "pluto-tabs__close",
            onClick: v,
            className: r.E("close"),
            variant: "text",
            sharp: !0,
            children: /* @__PURE__ */ s.jsx(ae, { unsavedChanges: T })
          }
        )
      ]
    }
  );
}, de = ({
  onRename: o,
  name: t,
  tabKey: e,
  editable: l = !0,
  level: n
}) => o == null || !l ? /* @__PURE__ */ s.jsx(ne, { overflow: "ellipsis", level: n, children: t }) : /* @__PURE__ */ s.jsx(
  oe,
  {
    level: n,
    id: r.B(`tab-${e}`),
    onChange: (a) => o?.(e, a),
    value: t,
    overflow: "ellipsis"
  }
), fe = (o = "", t = []) => {
  if (t.length !== 0)
    return t.find((e) => e.tabKey === o) != null ? o : t[t.length - 1]?.tabKey;
}, pe = (o, t, e) => {
  if (t = t.trim(), t.length === 0) return e;
  const l = e.find((n) => n.tabKey === o);
  return l == null || l.name === t ? e : e.map((n) => n.tabKey === o ? { ...n, name: t } : n);
}, ge = ({
  tabs: o,
  content: t,
  selected: e,
  onSelect: l
}) => {
  const [n, a] = le({
    initial: e ?? o[0]?.tabKey ?? "",
    value: e,
    onChange: l
  }), c = se(e ?? n), d = C(
    (g) => {
      a(g), c.current == null && l?.(g);
    },
    [n, a, l]
  );
  return {
    tabs: o,
    selected: n,
    content: t,
    onSelect: d
  };
}, me = ({
  id: o,
  content: t,
  children: e,
  onSelect: l,
  selected: n,
  selectedAltColor: a,
  closable: c,
  tabs: d,
  onClose: g,
  onDragStart: j,
  onDragEnd: S,
  onCreate: x,
  onRename: E,
  emptyContent: T,
  className: D,
  onDragOver: m,
  onDrop: b,
  contextMenu: h,
  actions: v,
  addTooltip: N,
  size: f = "medium",
  direction: i = "y",
  x: L,
  y: P,
  ...O
}) => /* @__PURE__ */ s.jsx(
  B,
  {
    id: o,
    empty: !0,
    className: r(r.B("tabs"), D),
    direction: i,
    x: L,
    y: P,
    onDragOver: m,
    onDrop: b,
    ...O,
    children: /* @__PURE__ */ s.jsxs(
      I,
      {
        value: {
          tabs: d,
          emptyContent: T,
          selected: n,
          closable: c,
          content: e ?? t,
          onSelect: l,
          onClose: g,
          onDragStart: j,
          onDragEnd: S,
          onRename: E,
          onCreate: x,
          onDrop: b
        },
        children: [
          /* @__PURE__ */ s.jsx(
            V,
            {
              size: f,
              direction: G.swap(i),
              altColor: a,
              contextMenu: h,
              addTooltip: N,
              actions: v
            }
          ),
          /* @__PURE__ */ s.jsx(Z, {})
        ]
      }
    )
  }
), Z = () => {
  const { tabs: o, selected: t, content: e, emptyContent: l, onSelect: n } = M();
  let a = null;
  const c = o.find((d) => d.tabKey === t);
  return t == null || c == null ? a = l ?? null : e != null ? typeof e == "function" ? a = e(c) : a = e : c.content != null && (a = c.content), /* @__PURE__ */ s.jsx(
    "div",
    {
      className: r.B("tabs-content"),
      onClick: () => t != null && n?.(t),
      children: a
    }
  );
}, F = p.object({
  tabKey: p.string(),
  name: p.string(),
  closable: p.boolean().optional(),
  icon: p.unknown().optional(),
  editable: p.boolean().optional(),
  visible: p.boolean().optional(),
  unsavedChanges: p.boolean().optional(),
  loading: p.boolean().optional()
}), xe = F.extend({
  content: p.unknown().optional()
}), Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Content: Z,
  Provider: I,
  Selector: V,
  Tabs: me,
  rename: pe,
  resetSelection: fe,
  specZ: F,
  tabZ: xe,
  useContext: M,
  useStatic: ge
}, Symbol.toStringTag, { value: "Module" }));
export {
  me as T,
  pe as a,
  Le as e,
  fe as r,
  xe as t,
  ge as u
};
