import { jsx as i, jsxs as T } from "react/jsx-runtime";
import { useState as f, useEffect as y, useCallback as l, useContext as S } from "react";
import { useTranslation as N } from "react-i18next";
import { useLexicalComposerContext as A } from "@lexical/react/LexicalComposerContext";
import { $getNodeByKey as B } from "lexical";
import { H, T as R, d as $, b as z, C as O, c as j, e as F, M as k, f as L, h as U } from "./layers.0_o7xyFB.js";
import { Tooltip as V, ActionIcon as X, Popover as v, TextInput as q, UnstyledButton as C } from "@mantine/core";
function G({
  onAdd: t,
  label: a,
  disabled: o,
  tooltip: r
}) {
  const n = /* @__PURE__ */ i(
    X,
    {
      variant: "subtle",
      color: "gray",
      size: "sm",
      radius: "sm",
      className: "tabs-block__add",
      "data-testid": "tabs-add",
      "aria-label": a,
      "aria-disabled": o ? "true" : void 0,
      "data-disabled": o || void 0,
      onMouseDown: (e) => e.preventDefault(),
      onClick: (e) => {
        if (o) {
          e.preventDefault();
          return;
        }
        t();
      },
      children: /* @__PURE__ */ i(H, { icon: R, size: 14 })
    }
  );
  return r ? /* @__PURE__ */ i(V, { label: r, position: "top", withArrow: !0, openDelay: 300, children: n }) : n;
}
function J({
  tab: t,
  isActive: a,
  containerKey: o,
  onActivate: r,
  readOnly: n
}) {
  const [e] = A(), { t: m } = N(), [p, u] = f(!1), [d, c] = f(t.title), [D, b] = f(!1);
  y(() => {
    c(t.title);
  }, [t.title]);
  const h = l(() => {
    const s = d.trim();
    s && s !== t.title ? $(e, o, t.id, s) : c(t.title), u(!1);
  }, [e, o, t.id, t.title, d]), _ = l(() => {
    c(t.title), u(!1);
  }, [t.title]), w = l(
    (s) => {
      s.key === "Enter" ? (s.preventDefault(), h()) : s.key === "Escape" && (s.preventDefault(), _());
    },
    [h, _]
  ), E = l(() => {
    p || r();
  }, [p, r]), I = l(
    (s) => {
      n || (s.stopPropagation(), u(!0));
    },
    [n]
  ), K = l(
    (s) => {
      n || (s.preventDefault(), s.stopPropagation(), b(!0));
    },
    [n]
  ), M = l(() => {
    b(!1), u(!0);
  }, []), P = l(() => {
    b(!1), z(e, o, t.id);
  }, [e, o, t.id]);
  return /* @__PURE__ */ T(
    v,
    {
      opened: D,
      onChange: b,
      position: "bottom-start",
      shadow: "md",
      withinPortal: !0,
      trapFocus: !1,
      closeOnClickOutside: !0,
      closeOnEscape: !0,
      children: [
        /* @__PURE__ */ i(v.Target, { children: /* @__PURE__ */ i(
          "span",
          {
            className: "tabs-block__tab",
            "data-active": a,
            "data-testid": "tabs-tab",
            "data-tab-id": t.id,
            onClick: E,
            onDoubleClick: I,
            onContextMenu: K,
            children: p ? /* @__PURE__ */ i(
              q,
              {
                size: "xs",
                variant: "unstyled",
                value: d,
                onChange: (s) => c(s.currentTarget.value),
                onBlur: h,
                onKeyDown: w,
                autoFocus: !0,
                classNames: { input: "tabs-block__rename-input" },
                styles: {
                  input: {
                    width: `${Math.max(d.length, 3)}ch`
                  }
                },
                "data-testid": "tabs-rename-input"
              }
            ) : /* @__PURE__ */ i("span", { className: "tabs-block__tab-label", children: t.title })
          }
        ) }),
        /* @__PURE__ */ i(v.Dropdown, { p: 4, children: /* @__PURE__ */ T("div", { className: "tabs-block__menu", children: [
          /* @__PURE__ */ i(
            C,
            {
              className: "tabs-block__menu-item",
              onClick: M,
              "data-testid": "tabs-menu-rename",
              children: m("editor.menu.other.tabs.actions.rename")
            }
          ),
          /* @__PURE__ */ i(
            C,
            {
              className: "tabs-block__menu-item tabs-block__menu-item--danger",
              onClick: P,
              "data-testid": "tabs-menu-delete",
              children: m("editor.menu.other.tabs.actions.delete")
            }
          )
        ] }) })
      ]
    }
  );
}
function g(t, a) {
  let o = { tabs: [], activeTabId: "", containerKey: "" };
  return t.getEditorState().read(() => {
    const r = B(a);
    if (!r || !L(r)) return;
    const n = r.getParent();
    U(n) && (o = {
      tabs: n.getTabs(),
      activeTabId: n.getActiveTabId(),
      containerKey: n.getKey()
    });
  }), o;
}
function x(t) {
  t.stopPropagation();
}
function nt({
  nodeKey: t
}) {
  const [a] = A(), { t: o } = N(), { disable: r } = S(O), n = !!r, [e, m] = f(
    () => g(a, t)
  );
  y(() => (m(g(a, t)), a.registerUpdateListener(() => {
    m(g(a, t));
  })), [a, t]);
  const p = l(() => {
    e.containerKey && j(a, e.containerKey);
  }, [a, e.containerKey]), u = l(
    (c) => {
      e.containerKey && F(a, e.containerKey, c);
    },
    [a, e.containerKey]
  );
  if (e.tabs.length === 0 || !e.containerKey) return null;
  const d = e.tabs.length < k;
  return /* @__PURE__ */ T(
    "div",
    {
      className: "tabs-block__header",
      contentEditable: !1,
      onMouseDown: x,
      onClick: x,
      children: [
        /* @__PURE__ */ i("div", { className: "tabs-block__tabs", "data-testid": "tabs-header", children: e.tabs.map((c) => /* @__PURE__ */ i(
          J,
          {
            tab: c,
            isActive: c.id === e.activeTabId,
            containerKey: e.containerKey,
            onActivate: () => u(c.id),
            readOnly: n
          },
          c.id
        )) }),
        !n && /* @__PURE__ */ i(
          G,
          {
            onAdd: p,
            label: o("editor.menu.other.tabs.actions.add"),
            disabled: !d,
            tooltip: d ? void 0 : o("editor.menu.other.tabs.actions.maxReached", {
              max: k
            })
          }
        )
      ]
    }
  );
}
export {
  nt as default
};
