import { jsxs as g, jsx as e, Fragment as y } from "react/jsx-runtime";
import { U as O, j as U, u as $, x as w, O as k, S as M, V as j, m as L, g as W, n as q, F as h, T as z, p as J, q as Q, W as V, r as Y, s as Z, L as G, Y as H, J as X, M as K, P as ee, Q as te, Z as ne, a0 as ae, a1 as le } from "./index-BtS8RM-z.js";
import { d as oe } from "./LexicalNestedComposer.prod-nuvzNal3.js";
import { useRef as _, useState as E, useCallback as F, useEffect as se, Suspense as ie } from "react";
function re({ children: l, label: s, className: t, ...f }) {
  return /* @__PURE__ */ g("div", { className: "Input__wrapper", children: [
    /* @__PURE__ */ e("label", { style: { marginTop: "-1em" }, className: "Input__label", children: s }),
    /* @__PURE__ */ e("select", { ...f, className: t || "select", children: l })
  ] });
}
const R = /* @__PURE__ */ new Set();
function ce(l) {
  if (!R.has(l))
    throw new Promise((s) => {
      const t = new Image();
      t.src = l, t.onload = () => {
        R.add(l), s(null);
      };
    });
}
function de({
  altText: l,
  className: s,
  imageRef: t,
  src: f,
  width: i,
  height: d,
  position: r
}) {
  return ce(f), /* @__PURE__ */ e(
    "img",
    {
      className: s || void 0,
      src: f,
      alt: l,
      ref: t,
      "data-position": r,
      style: {
        display: "block",
        height: d,
        width: i
      },
      draggable: "false"
    }
  );
}
function ue({
  activeEditor: l,
  nodeKey: s,
  onClose: t
}) {
  const i = l.getEditorState().read(() => M(s)), [d, r] = E(i.getAltText()), [v, x] = E(i.getShowCaption()), [I, b] = E(i.getPosition()), C = (u) => {
    x(u.target.checked);
  }, c = (u) => {
    b(u.target.value);
  }, p = () => {
    const u = { altText: d, position: I, showCaption: v };
    i && l.update(() => {
      i.update(u);
    }), t();
  };
  return /* @__PURE__ */ g(y, { children: [
    /* @__PURE__ */ e("div", { style: { marginBottom: "1em" }, children: /* @__PURE__ */ e(
      ne,
      {
        label: "Alt-текст",
        placeholder: "Альтернативный текст",
        onChange: r,
        value: d,
        "data-test-id": "image-modal-alt-text-input"
      }
    ) }),
    /* @__PURE__ */ g(
      re,
      {
        style: { marginBottom: "1em", width: "208px" },
        value: I,
        label: "Position",
        name: "position",
        id: "position-select",
        onChange: c,
        children: [
          /* @__PURE__ */ e("option", { value: "left", children: "Left" }),
          /* @__PURE__ */ e("option", { value: "right", children: "Right" }),
          /* @__PURE__ */ e("option", { value: "full", children: "Full Width" })
        ]
      }
    ),
    /* @__PURE__ */ g("div", { className: "Input__wrapper", children: [
      /* @__PURE__ */ e(
        "input",
        {
          id: "caption",
          type: "checkbox",
          checked: v,
          onChange: C
        }
      ),
      /* @__PURE__ */ e("label", { htmlFor: "caption", children: "Show Caption" })
    ] }),
    /* @__PURE__ */ e(ae, { children: /* @__PURE__ */ e(le, { "data-test-id": "image-modal-file-upload-btn", onClick: () => p(), children: "Применить" }) })
  ] });
}
function be({
  src: l,
  altText: s,
  nodeKey: t,
  width: f,
  height: i,
  showCaption: d,
  caption: r,
  position: v
}) {
  const [x, I] = O(), b = _(null), C = _(null), [c, p, u] = U(t), [a] = $(), [A, B] = E(null), P = _(null), N = F(
    (o) => {
      if (c && w(k())) {
        o.preventDefault();
        const n = M(t);
        j(n) && n.remove();
      }
      return !1;
    },
    [c, t]
  ), T = F(
    (o) => {
      const m = k(), n = C.current;
      if (c && w(m) && m.getNodes().length === 1) {
        if (d)
          return L(null), o.preventDefault(), r.focus(), !0;
        if (n !== null && n !== document.activeElement)
          return o.preventDefault(), n.focus(), !0;
      }
      return !1;
    },
    [r, c, d]
  ), D = F(
    (o) => P.current === r || C.current === o.target ? (L(null), a.update(() => {
      p(!0);
      const m = a.getRootElement();
      m !== null && m.focus();
    }), !0) : !1,
    [r, a, p]
  );
  return se(() => {
    let o = !0;
    const m = W(
      a.registerUpdateListener(({ editorState: n }) => {
        o && B(n.read(() => k()));
      }),
      a.registerCommand(
        Z,
        (n, S) => (P.current = S, !1),
        h
      ),
      a.registerCommand(
        Y,
        (n) => {
          const S = n;
          return S.target === b.current ? (S.shiftKey ? p(!c) : (u(), p(!0)), !0) : !1;
        },
        h
      ),
      a.registerCommand(
        V,
        (n) => n.target === b.current ? (n.preventDefault(), !0) : !1,
        h
      ),
      a.registerCommand(Q, N, h),
      a.registerCommand(J, N, h),
      a.registerCommand(z, T, h),
      a.registerCommand(q, D, h)
    );
    return () => {
      o = !1, m();
    };
  }, [u, a, c, t, N, T, D, p]), /* @__PURE__ */ g(ie, { fallback: null, children: [
    /* @__PURE__ */ g(y, { children: [
      /* @__PURE__ */ g("div", { draggable: !1, children: [
        /* @__PURE__ */ e(
          "button",
          {
            className: "image-edit-button",
            ref: C,
            onClick: () => {
              I("Update Inline Image", (o) => /* @__PURE__ */ e(
                ue,
                {
                  activeEditor: a,
                  nodeKey: t,
                  onClose: o
                }
              ));
            },
            children: "Edit"
          }
        ),
        /* @__PURE__ */ e(
          de,
          {
            className: c ? `focused ${w(A) ? "draggable" : ""}` : null,
            src: l,
            altText: s,
            imageRef: b,
            width: f,
            height: i,
            position: v
          }
        )
      ] }),
      d && /* @__PURE__ */ e("div", { className: "image-caption-container", children: /* @__PURE__ */ g(oe, { initialEditor: r, children: [
        /* @__PURE__ */ e(G, {}),
        /* @__PURE__ */ e(H, { setIsLinkEditMode: () => {
        } }),
        /* @__PURE__ */ e(
          X,
          {
            contentEditable: /* @__PURE__ */ e(K, { className: "InlineImageNode__contentEditable" }),
            placeholder: /* @__PURE__ */ e(ee, { className: "InlineImageNode__placeholder", children: "Enter a caption..." }),
            ErrorBoundary: te
          }
        )
      ] }) })
    ] }),
    x
  ] });
}
export {
  ue as UpdateInlineImageDialog,
  be as default
};
