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