import { jsx as s, jsxs as U } from "react/jsx-runtime";
import { useRef as b, useState as N, useEffect as $, useCallback as a, useMemo as C } from "react";
import { NodeViewWrapper as O } from "@tiptap/react";
import { RESIZE_BAR_TIMEOUT as S, VIDEO_DEFAULT_HEIGHT as T, VIDEO_DEFAULT_WIDTH as R, MINIMUM_VIDEO_WIDTH as X } from "../../constants/index.js";
import k from "../../utils/getYouTubeVideoId.js";
import A from "../../utils/getVimeoVideoId.js";
import { Skeleton as j } from "../../../skeleton/SkeletonPrimitive.js";
const Y = ({ node: D, selected: v, updateAttributes: y }) => {
  const { src: m, alignment: W, width: l, height: d } = D.attrs, c = b(null), f = b(null), o = b(null), [H, g] = N(!1), [x, w] = N(!0);
  $(() => {
    w(!0);
  }, [m]);
  const p = a(() => {
    w(!1);
  }, []), M = a(() => {
    w(!1);
  }, []), F = a(() => {
    o.current && (clearTimeout(o.current), o.current = null), g(!0);
  }, []), L = a(() => {
    o.current = setTimeout(() => {
      g(!1), o.current = null;
    }, S);
  }, []), _ = a(() => {
    o.current && (clearTimeout(o.current), o.current = null), g(!0);
  }, []), u = a((t) => {
    const i = f.current, e = c.current;
    if (!i || !e) return;
    const r = t.clientX - i.startX, n = Math.max(X, i.startWidth + r), E = n / i.aspectRatio;
    e.style.width = `${Math.round(n)}px`, e.style.height = `${Math.round(E)}px`;
  }, []), h = a(() => {
    const t = c.current;
    if (t) {
      const i = parseFloat(t.style.width), e = parseFloat(t.style.height), r = t.getBoundingClientRect(), n = Number.isFinite(i) ? i : r.width, E = Number.isFinite(e) ? e : r.height, V = Math.round(n), I = Math.round(E);
      Number.isFinite(V) && Number.isFinite(I) && y({ width: V, height: I });
    }
    f.current = null, document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", h);
  }, [u, y]), z = a(
    (t) => {
      t.preventDefault(), t.stopPropagation();
      const i = c.current;
      if (!i) return;
      const e = i.getBoundingClientRect(), r = e.width, n = e.height;
      f.current = {
        startX: t.clientX,
        startWidth: r,
        aspectRatio: r / n
      }, document.addEventListener("mousemove", u), document.addEventListener("mouseup", h);
    },
    [u, h]
  );
  $(() => () => {
    o.current && clearTimeout(o.current), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", h);
  }, [u, h]);
  const B = C(() => {
    const t = k(m), i = A(m), e = {};
    l && (e.width = `${l}px`), d && (e.height = `${d}px`);
    const r = "html-editor-video", n = v ? `${r} html-editor-video--selected` : r;
    return t ? /* @__PURE__ */ s(
      "iframe",
      {
        ref: c,
        src: `https://www.youtube.com/embed/${t}`,
        className: n,
        style: {
          width: l ? `${l}px` : `${R}px`,
          height: d ? `${d}px` : `${T}px`,
          maxWidth: "100%",
          ...e
        },
        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",
        title: "YouTube video",
        onLoad: p
      }
    ) : i ? /* @__PURE__ */ s(
      "iframe",
      {
        ref: c,
        src: `https://player.vimeo.com/video/${i}`,
        className: n,
        style: {
          width: l ? `${l}px` : `${R}px`,
          height: d ? `${d}px` : `${T}px`,
          maxWidth: "100%",
          ...e
        },
        allow: "autoplay; fullscreen; picture-in-picture",
        title: "Vimeo video",
        onLoad: p
      }
    ) : /* @__PURE__ */ s(
      "video",
      {
        ref: c,
        src: m,
        className: n,
        style: {
          maxWidth: "100%",
          height: "auto",
          ...e
        },
        controls: !0,
        "aria-label": "Video",
        onLoadedData: p,
        onError: M
      }
    );
  }, [m, l, d, v, p, M]);
  return /* @__PURE__ */ s(O, { style: { textAlign: W || "left" }, children: /* @__PURE__ */ U(
    "div",
    {
      className: "html-editor-video-wrapper relative inline-block",
      "data-drag-handle": "",
      onMouseEnter: F,
      onMouseLeave: L,
      children: [
        x && /* @__PURE__ */ s(j, { className: "absolute inset-0 rounded-[var(--border-radius-sm)]", role: "status", "aria-label": "Video wird geladen" }),
        /* @__PURE__ */ s("div", { style: { visibility: x ? "hidden" : "visible" }, children: B }),
        /* @__PURE__ */ s(
          "div",
          {
            className: "html-editor-video-resize-bar absolute flex items-center h-full top-0 -right-[var(--spacing-2)]",
            "data-visible": H || v,
            onMouseEnter: _,
            onMouseLeave: L,
            children: /* @__PURE__ */ s(
              "div",
              {
                className: "html-editor-video-resize-handle",
                style: {
                  cursor: "ew-resize",
                  height: "var(--spacing-16)",
                  width: "var(--spacing-1-5)"
                },
                onMouseDown: z,
                role: "separator",
                "aria-label": "Videogröße ändern",
                "aria-orientation": "vertical"
              }
            )
          }
        )
      ]
    }
  ) });
};
Y.displayName = "HtmlEditorVideoNodeView";
export {
  Y as default
};
//# sourceMappingURL=HtmlEditorVideoNodeView.js.map
