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