import { jsx as n, jsxs as y } from "react/jsx-runtime";
import { useRef as E, useState as L, useEffect as M, useCallback as l } from "react";
import { NodeViewWrapper as k } from "@tiptap/react";
import { Skeleton as D } from "../../../skeleton/SkeletonPrimitive.js";
import C from "../../../icon/Icon.js";
import X from "../../../text/Text.js";
import j from "../../../box/Box.js";
const z = 50, S = ({ node: B, selected: g, updateAttributes: f }) => {
  const { src: p, alt: c, alignment: I, width: v, height: b } = B.attrs, d = E(null), h = E(null), [w, u] = L(!0), [x, N] = L(!1);
  M(() => {
    u(!0), N(!1);
  }, [p]);
  const R = l(() => {
    u(!1);
  }, []), F = l(() => {
    u(!1), N(!0);
  }, []), a = l((r) => {
    const e = h.current, t = d.current;
    if (!e || !t) return;
    const i = r.clientX - e.startX, m = Math.max(z, e.startWidth + i), $ = m / e.aspectRatio;
    t.style.width = `${Math.round(m)}px`, t.style.height = `${Math.round($)}px`;
  }, []), s = l(() => {
    const r = d.current;
    if (r) {
      let e = parseFloat(r.style.width), t = parseFloat(r.style.height);
      if (!Number.isFinite(e) || !Number.isFinite(t)) {
        const i = r.getBoundingClientRect();
        e = i.width, t = i.height;
      }
      Number.isFinite(e) && Number.isFinite(t) && f({ width: Math.round(e), height: Math.round(t) });
    }
    h.current = null, document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", s);
  }, [a, f]), H = l(
    (r) => {
      r.preventDefault(), r.stopPropagation();
      const e = d.current;
      if (!e) return;
      const t = e.getBoundingClientRect(), i = t.width, m = t.height;
      h.current = {
        startX: r.clientX,
        startWidth: i,
        aspectRatio: i / m
      }, document.addEventListener("mousemove", a), document.addEventListener("mouseup", s);
    },
    [a, s]
  );
  M(() => () => {
    document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", s);
  }, [a, s]);
  const o = {};
  v && (o.width = `${v}px`), b && (o.height = `${b}px`);
  const W = `html-editor-image${g ? " html-editor-image--selected" : ""}`;
  return /* @__PURE__ */ n(k, { style: { textAlign: I || "left" }, children: /* @__PURE__ */ y("div", { className: "relative inline-block", "data-drag-handle": "", children: [
    w && /* @__PURE__ */ n(D, { className: "absolute inset-0 rounded-[var(--border-radius-sm)]", role: "status", "aria-label": "Bild wird geladen" }),
    x && /* @__PURE__ */ y(
      "div",
      {
        className: "flex flex-col items-center justify-center gap-[var(--spacing-2)] rounded-[var(--border-radius-sm)] border border-[var(--base-border)] bg-[var(--base-muted)]",
        style: { width: o.width ?? "200px", height: o.height ?? "150px" },
        role: "img",
        "aria-label": c ? `Bild konnte nicht geladen werden: ${c}` : "Bild konnte nicht geladen werden",
        children: [
          /* @__PURE__ */ n(C, { name: "ImageOff", size: 24, className: "text-[var(--base-muted-foreground)]", "aria-hidden": "true" }),
          /* @__PURE__ */ n(X, { type: "small", color: "muted", children: "Ungültige Bild-URL" })
        ]
      }
    ),
    /* @__PURE__ */ n(
      "img",
      {
        ref: d,
        src: p,
        alt: c || "",
        className: W,
        style: { ...o, visibility: w || x ? "hidden" : "visible" },
        draggable: !1,
        onLoad: R,
        onError: F
      }
    ),
    g && /* @__PURE__ */ n(j, { className: "absolute flex items-center h-full top-0 -right-[var(--spacing-2)]", children: /* @__PURE__ */ n(
      "div",
      {
        className: "html-editor-image-resize-handle",
        style: {
          cursor: "ew-resize",
          height: "var(--spacing-16)",
          width: "var(--spacing-1-5)"
        },
        onMouseDown: H,
        role: "slider",
        "aria-label": "Bildgröße ändern",
        "aria-orientation": "vertical"
      }
    ) })
  ] }) });
};
S.displayName = "HtmlEditorImageNodeView";
export {
  S as default
};
//# sourceMappingURL=HtmlEditorImageNodeView.js.map
