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