import { jsxs as U, jsx as m } from "react/jsx-runtime";
import { useState as a, useRef as W, useEffect as M, useCallback as b } from "react";
import { motion as S } from "framer-motion";
import { u as V } from "./index-Bk6WqXgW.mjs";
const et = ({
  url: j,
  zoom: B,
  rotation: H,
  resetKey: P,
  fileSize: c,
  onZoomChange: s,
  onNaturalWidthChange: $,
  onNaturalHeightChange: D
}) => {
  const N = V(), [x, E] = a(!1), [h, k] = a(null), [f, d] = a({ x: 0, y: 0 }), [g, I] = a(!1), [L, O] = a({ x: 0, y: 0 }), [Y, y] = a(1), [i, _] = a({ width: 0, height: 0 }), q = W(null), R = W(null);
  M(() => {
    E(!1), k(null), d({ x: 0, y: 0 }), y(1);
  }, [j]), M(() => {
    y(B);
  }, [B]), M(() => {
    P !== void 0 && d({ x: 0, y: 0 });
  }, [P]);
  const A = (t) => {
    E(!0);
    const e = t.currentTarget;
    _({ width: e.naturalWidth, height: e.naturalHeight }), $ == null || $(e.naturalWidth), D == null || D(e.naturalHeight);
  }, v = b((t, e) => {
    const r = R.current;
    if (!r || i.width === 0) return t;
    const o = r.clientWidth, p = r.clientHeight, w = i.width * e, X = i.height * e, u = Math.min(80, o * 0.15, p * 0.15), n = (o + w) / 2 - u, l = (p + X) / 2 - u;
    return {
      x: n > 0 ? Math.max(-n, Math.min(n, t.x)) : 0,
      y: l > 0 ? Math.max(-l, Math.min(l, t.y)) : 0
    };
  }, [i]), G = () => {
    k(N("image.load_failed")), E(!0);
  }, J = () => {
    d({ x: 0, y: 0 }), y(1), s == null || s(1);
  };
  M(() => {
    const t = R.current;
    if (!t) return;
    const e = (r) => {
      r.preventDefault(), r.stopPropagation();
      const o = t.getBoundingClientRect(), p = r.clientX - o.left - o.width / 2, w = r.clientY - o.top - o.height / 2, X = r.deltaY > 0 ? -0.05 : 0.05;
      y((u) => {
        const n = Math.max(0.01, Math.min(10, u + X)), l = n / u;
        return d((T) => v({
          x: p - l * (p - T.x),
          y: w - l * (w - T.y)
        }, n)), s == null || s(n), n;
      });
    };
    return t.addEventListener("wheel", e, { passive: !1 }), () => t.removeEventListener("wheel", e);
  }, [s, v]);
  const K = b((t) => {
    t.button === 0 && (I(!0), O({
      x: t.clientX - f.x,
      y: t.clientY - f.y
    }));
  }, [f]), Q = b((t) => {
    g && d(v({
      x: t.clientX - L.x,
      y: t.clientY - L.y
    }, Y));
  }, [g, L, Y, v]), F = b(() => {
    I(!1);
  }, []);
  return /* @__PURE__ */ U(
    "div",
    {
      ref: R,
      className: "rfp-relative rfp-flex rfp-items-center rfp-justify-center rfp-w-full rfp-h-full rfp-overflow-hidden",
      onMouseDown: K,
      onMouseMove: Q,
      onMouseUp: F,
      onMouseLeave: F,
      style: { cursor: g ? "grabbing" : "grab" },
      children: [
        !x && !h && /* @__PURE__ */ m("div", { className: "rfp-flex rfp-items-center rfp-justify-center", children: /* @__PURE__ */ m("div", { className: "rfp-w-12 rfp-h-12 rfp-border-4 rfp-border-line-strong rfp-border-t-spinner-head rfp-rounded-full rfp-animate-spin" }) }),
        h && /* @__PURE__ */ m("div", { className: "rfp-text-fg-secondary rfp-text-center", children: /* @__PURE__ */ m("p", { className: "rfp-text-lg", children: h }) }),
        /* @__PURE__ */ m(
          S.img,
          {
            ref: q,
            src: j,
            alt: "Preview",
            className: `rfp-max-w-none rfp-select-none ${x ? "" : "rfp-hidden"}`,
            style: {
              transform: `translate(${f.x}px, ${f.y}px) scale(${Y}) rotate(${H}deg)`,
              transformOrigin: "center",
              transition: g ? "none" : "transform 0.3s ease-out"
            },
            onLoad: A,
            onError: G,
            onDoubleClick: J,
            initial: { opacity: 0 },
            animate: { opacity: x ? 1 : 0 },
            transition: { duration: 0.3 },
            draggable: !1
          }
        ),
        x && !h && i.width > 0 && /* @__PURE__ */ U("div", { className: "rfp-absolute rfp-bottom-2 rfp-right-3 rfp-text-[10px] rfp-text-fg-disabled hover:rfp-text-fg-secondary rfp-transition-colors rfp-pointer-events-auto rfp-select-none rfp-cursor-default", children: [
          i.width,
          " × ",
          i.height,
          c != null && ` · ${c < 1024 ? `${c} B` : c < 1024 * 1024 ? `${(c / 1024).toFixed(1)} KB` : `${(c / (1024 * 1024)).toFixed(1)} MB`}`
        ] })
      ]
    }
  );
};
export {
  et as ImageRenderer
};
//# sourceMappingURL=index-Cpk1RStU.mjs.map
