import { jsxs as J, jsx as w } from "react/jsx-runtime";
import { t as ot } from "../../classix-DG18itHa.js";
import { useRef as x, useState as Z, useEffect as U } from "react";
import { Button as wt } from "../button/index.js";
import { Figure as xt } from "../figure/index.js";
import { Icon as yt } from "../icon/index.js";
import '../../assets/index17.css';const Yt = "_croppable_2wdo8_1", Xt = "_empty_2wdo8_14", At = "_media_2wdo8_22", Dt = "_overlay_2wdo8_33", Wt = "_viewport_2wdo8_41", Ht = "_draggable_2wdo8_53", St = "_dragging_2wdo8_57", Zt = "_inner_2wdo8_61", jt = "_standalone_2wdo8_77", M = {
  croppable: Yt,
  empty: Xt,
  media: At,
  overlay: Dt,
  viewport: Wt,
  draggable: Ht,
  dragging: St,
  inner: Zt,
  standalone: jt
}, kt = 192, $ = {
  offset: {
    x: 0,
    y: 0
  },
  zoom: 1
}, bt = "Select image", P = 10, j = 0.1, Bt = 0.92, h = (u, p, _) => Math.min(_, Math.max(p, u)), Nt = (u) => new Promise((p, _) => {
  const d = URL.createObjectURL(u), s = new globalThis.Image();
  s.onload = () => {
    URL.revokeObjectURL(d), p(s);
  }, s.onerror = () => {
    URL.revokeObjectURL(d), _(new Error("croppable-image-load-failed"));
  }, s.src = d;
}), $t = async ({
  file: u,
  fill: p,
  transform: _,
  viewport: d
}) => {
  const s = await Nt(u), Y = d.width / s.naturalWidth, R = d.height / s.naturalHeight, y = Math.max(Y, R), k = s.naturalWidth * y, L = s.naturalHeight * y, C = p === "width" ? Math.max(j, Y / y) : p === "height" ? Math.max(j, R / y) : j, T = h(_.zoom, C, P), g = y * T, b = k * T, F = L * T, m = (d.width - b) / 2 + _.offset.x, v = (d.height - F) / 2 + _.offset.y, X = h((0 - m) / g, 0, s.naturalWidth), E = h((0 - v) / g, 0, s.naturalHeight), O = h(d.width / g, 1, Math.max(1, s.naturalWidth - X)), c = h(d.height / g, 1, Math.max(1, s.naturalHeight - E)), z = document.createElement("canvas"), a = z.getContext("2d");
  if (!a)
    throw new Error("croppable-image-context-missing");
  z.width = Math.max(1, Math.round(O)), z.height = Math.max(1, Math.round(c)), a.drawImage(s, X, E, O, c, 0, 0, z.width, z.height);
  const A = u.type.startsWith("image/") ? u.type : "image/jpeg", D = await new Promise((G) => {
    z.toBlob(G, A, Bt);
  });
  if (!D)
    throw new Error("croppable-image-export-failed");
  return new globalThis.File([D], u.name, {
    lastModified: Date.now(),
    type: D.type || A
  });
}, Ct = ({
  children: u,
  fill: p = "none",
  height: _,
  image: d,
  label: s,
  onCroppableChange: Y,
  onFileChange: R,
  onImageChange: y,
  onTransformChange: k,
  transform: L,
  standalone: C
}) => {
  const T = x(null), g = x(null), b = x(null), F = x(null), m = x(y), v = x(null), X = x(null), E = x(null), O = x(/* @__PURE__ */ new Map()), c = x($), z = x(null), [a, A] = Z(null), [D, G] = Z(null), [rt, tt] = Z(!1), [zt, ct] = Z($), [q, it] = Z(null), [f, Mt] = Z({
    width: 0,
    height: 0
  }), B = (() => {
    const t = f.width, n = f.height;
    if (!t || !n) return {
      width: 0,
      height: 0,
      minZoom: j
    };
    if (!a) return {
      width: t,
      height: n,
      minZoom: j
    };
    const o = t / a.width, e = n / a.height, r = Math.max(o, e), i = p === "width" ? o / r : p === "height" ? e / r : 0;
    return {
      width: a.width * r,
      height: a.height * r,
      minZoom: Math.max(j, i)
    };
  })(), W = B.minZoom, N = L ?? zt, H = h(N.zoom, W, P), K = D ?? d ?? null, st = !u && !!d && !D && !q, Q = !st, at = u ?? (K ? /* @__PURE__ */ w("img", { alt: "", draggable: !1, onLoad: (t) => {
    const n = t.currentTarget;
    n.naturalWidth && n.naturalHeight && A({
      width: n.naturalWidth,
      height: n.naturalHeight
    });
  }, src: K }) : null), S = at == null, et = (t, n) => {
    const {
      maxX: o,
      maxY: e
    } = ut(n);
    return {
      x: h(t.x, -o, o),
      y: h(t.y, -e, e)
    };
  }, lt = (t, n) => {
    const o = z.current;
    if (!o) return null;
    const e = o.getBoundingClientRect(), r = t - e.left - e.width / 2, i = n - e.top - e.height / 2;
    return {
      x: r,
      y: i
    };
  }, _t = (t, n, o, e) => {
    const r = h(n, W, P), i = h(o, W, P);
    if (r === 0) return t;
    const l = i / r;
    return {
      x: (1 - l) * e.x + l * t.x,
      y: (1 - l) * e.y + l * t.y
    };
  }, Rt = (t, n, o) => {
    const e = c.current.zoom, r = h(t, W, P), i = c.current.offset, l = o ? _t(i, e, r, o) : n, I = et(l, r);
    c.current = {
      zoom: r,
      offset: I
    }, L || ct({
      zoom: r,
      offset: I
    }), k == null || k({
      zoom: r,
      offset: I
    });
  }, V = (t, n, o) => {
    X.current = {
      zoom: t,
      offset: n,
      anchor: o ?? null
    }, g.current == null && (g.current = window.requestAnimationFrame(() => {
      g.current = null;
      const e = X.current;
      X.current = null;
      const r = (e == null ? void 0 : e.zoom) ?? c.current.zoom, i = (e == null ? void 0 : e.offset) ?? c.current.offset, l = (e == null ? void 0 : e.anchor) ?? null;
      Rt(r, i, l);
    }));
  }, Lt = (t) => {
    if (S || !Q) return;
    const n = t.ctrlKey ? 1e-3 : 25e-5, o = c.current.zoom * Math.exp(-t.deltaY * n), e = lt(t.clientX, t.clientY);
    V(o, c.current.offset, e);
  }, ut = (t) => {
    const n = f.width, o = f.height;
    if (!n || !o) return {
      maxX: 0,
      maxY: 0
    };
    const e = h(t, W, P), r = B.width * e, i = B.height * e, l = Math.max(0, (r - n) / 2), I = Math.max(0, (i - o) / 2);
    return {
      maxX: l,
      maxY: I
    };
  }, Tt = (t) => {
    var r;
    const n = t.target, o = ((r = n.files) == null ? void 0 : r[0]) ?? null;
    if (v.current && (URL.revokeObjectURL(v.current), v.current = null), !o) {
      G(null), it(null), R == null || R(null), n.value = "";
      return;
    }
    const e = URL.createObjectURL(o);
    v.current = e, G(e), A(null), it(o), V($.zoom, $.offset), c.current = $, R == null || R(o), n.value = "";
  }, vt = (t) => {
    if (!(S || !Q || t.pointerType === "mouse" && t.button !== 0)) {
      if (t.currentTarget.setPointerCapture(t.pointerId), t.pointerType === "touch") {
        const n = O.current;
        if (n.set(t.pointerId, {
          x: t.clientX,
          y: t.clientY
        }), n.size === 2) {
          b.current = null, T.current = null, tt(!1);
          const [o, e] = Array.from(n.values());
          E.current = Math.hypot(o.x - e.x, o.y - e.y);
          return;
        }
      }
      T.current = t.pointerId, b.current = {
        x: t.clientX,
        y: t.clientY,
        originX: c.current.offset.x,
        originY: c.current.offset.y
      };
    }
  }, Et = (t) => {
    if (S || !Q) return;
    if (t.pointerType === "touch") {
      const r = O.current;
      if (!r.has(t.pointerId)) return;
      if (r.set(t.pointerId, {
        x: t.clientX,
        y: t.clientY
      }), r.size === 2) {
        const [i, l] = Array.from(r.values()), I = i.x - l.x, Ut = i.y - l.y, pt = Math.hypot(I, Ut), gt = {
          x: (i.x + l.x) / 2,
          y: (i.y + l.y) / 2
        };
        if (E.current) {
          const Ot = pt / E.current, It = c.current.zoom * Ot, Pt = lt(gt.x, gt.y);
          V(It, c.current.offset, Pt);
        }
        E.current = pt;
        return;
      }
    }
    if (T.current !== t.pointerId || !b.current || !nt) return;
    const n = t.clientX - b.current.x, o = t.clientY - b.current.y, e = Math.abs(n) + Math.abs(o);
    !rt && e > 2 && tt(!0), !(e <= 1) && V(c.current.zoom, {
      x: b.current.originX + n,
      y: b.current.originY + o
    });
  }, dt = (t) => {
    t.pointerType === "touch" && (O.current.delete(t.pointerId), O.current.size < 2 && (E.current = null)), T.current === t.pointerId && (T.current = null, b.current = null, tt(!1));
  };
  U(() => {
    if (!L) return;
    const t = h(L.zoom, W, P);
    c.current = {
      zoom: t,
      offset: et(L.offset, t)
    };
  }, [L, f.width, f.height, a == null ? void 0 : a.width, a == null ? void 0 : a.height]), U(() => () => {
    v.current && URL.revokeObjectURL(v.current);
  }, []), U(() => {
    const t = z.current;
    if (!t) return;
    const n = () => {
      const r = t.getBoundingClientRect();
      Mt((i) => i.width === r.width && i.height === r.height ? i : {
        width: r.width,
        height: r.height
      }), Y && Y(r);
    };
    n();
    const o = () => n();
    if (window.addEventListener("scroll", o, !0), typeof ResizeObserver > "u") {
      const r = () => n();
      return window.addEventListener("resize", r), () => {
        window.removeEventListener("resize", r), window.removeEventListener("scroll", o, !0);
      };
    }
    const e = new ResizeObserver(() => n());
    return e.observe(t), () => {
      e.disconnect(), window.removeEventListener("scroll", o, !0);
    };
  }, [Y]), U(() => {
    if (L) return;
    const t = c.current.offset, n = et(t, H);
    t.x === n.x && t.y === n.y || (c.current = {
      zoom: c.current.zoom,
      offset: n
    }, ct((o) => ({
      ...o,
      offset: n
    })));
  }, [H, a, f.width, f.height]), U(() => {
    K || A(null);
  }, [K]), U(() => {
    m.current = y;
  }, [y]), U(() => {
    var o;
    if (!y) return;
    if (!q || !f.width || !f.height || u) {
      (o = m.current) == null || o.call(m, null);
      return;
    }
    let t = !0;
    const n = window.setTimeout(() => {
      $t({
        file: q,
        fill: p,
        transform: {
          zoom: H,
          offset: N.offset
        },
        viewport: f
      }).then((e) => {
        var r;
        t && ((r = m.current) == null || r.call(m, e));
      }).catch(() => {
        var e;
        t && ((e = m.current) == null || e.call(m, null));
      });
    }, 75);
    return () => {
      t = !1, window.clearTimeout(n);
    };
  }, [u, H, N.offset, p, q, f]), U(() => () => {
    g.current != null && (window.cancelAnimationFrame(g.current), g.current = null);
  }, []);
  const ht = ut(H), nt = !S && Q && (ht.maxX > 0 || ht.maxY > 0), mt = () => {
    var t;
    return (t = F.current) == null ? void 0 : t.click();
  }, ft = (t) => {
    t.preventDefault(), t.stopPropagation(), mt();
  };
  return /* @__PURE__ */ J("div", { className: ot(M.croppable, C && M.standalone), onClick: () => {
    S && mt();
  }, "data-component": "croppable", children: [
    /* @__PURE__ */ w("input", { accept: "image/*", onChange: Tt, ref: F, type: "file" }),
    /* @__PURE__ */ w("div", { className: M.viewport, ref: z, onDragStart: (t) => t.preventDefault(), onPointerDown: vt, onPointerMove: Et, onPointerUp: dt, onPointerCancel: dt, onWheel: Lt, style: {
      "--croppable-height": `${_ ?? kt}px`,
      "--croppable-zoom": H,
      "--croppable-x": `${N.offset.x}px`,
      "--croppable-y": `${N.offset.y}px`,
      ...a ? {
        "--croppable-image-width": `${B.width}px`,
        "--croppable-image-height": `${B.height}px`
      } : null
    }, children: S ? /* @__PURE__ */ J("div", { className: M.empty, children: [
      /* @__PURE__ */ w(xt, { children: /* @__PURE__ */ w(yt, { name: "image", size: "large" }) }),
      /* @__PURE__ */ w(wt, { onClick: ft, children: s ?? bt })
    ] }) : /* @__PURE__ */ J("div", { className: ot(M.media, nt && M.draggable, nt && rt && M.dragging), children: [
      /* @__PURE__ */ w("div", { className: ot(M.inner), children: at }),
      st && /* @__PURE__ */ w("div", { className: M.overlay, children: /* @__PURE__ */ J("div", { className: M.empty, children: [
        /* @__PURE__ */ w(xt, { children: /* @__PURE__ */ w(yt, { name: "image", size: "large" }) }),
        /* @__PURE__ */ w(wt, { onClick: ft, children: s ?? bt })
      ] }) })
    ] }) })
  ] });
};
export {
  Ct as Croppable
};
//# sourceMappingURL=index.js.map
