import { X as R, av as k, aw as B, ax as W, w as g, a2 as A, Z as C, cF as D, az as F, O as T, U as j, F as a, a6 as u, G as S, a7 as r, a8 as o, Y as c, af as b, a9 as M, aa as O, ac as U, ab as z, cG as $, _ as x, aB as G, cH as _, cI as L, aA as X, S as Y, ak as Z } from "./603b75d9.js";
import { useContext as H, useRef as P, useState as E, useEffect as I } from "react";
import "react-dom";
const q = R.div`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .ant-image,
  img {
    width: 100%;
    height: 100%;
  }

  img {
    object-fit: contain;
    pointer-events: auto;
    ${(e) => e.$animationStyle}
  }

  ${(e) => e.$style && J(e.$style)}
`, J = (e) => k`
    img {
      border: ${(s) => e.borderWidth ? e.borderWidth : "1px"} solid ${e.border};
      border-radius: ${e.radius};
      margin: ${e.margin};
      padding: ${e.padding};
      max-width: ${B(e.margin)};
      max-height: ${W(e.margin)};
      rotate: ${e.rotation};
    }

    .ant-image-mask {
      border-radius: ${e.radius};
    }
  `, K = [Z], Q = (e) => {
  const s = P(null), h = P(null), [l, V] = E(0), [d, N] = E(0), y = (t) => {
    t.onload = function() {
      V(t.naturalWidth), N(t.naturalHeight);
    };
  };
  I(() => {
    const t = new Image(0, 0);
    t.src = e.src.value, y(t), t.onerror = function(i) {
      t.src = $, y(t);
    };
  }, [e.src.value]), I(() => {
    d && l && f();
  }, [d, l]);
  const w = (t, i) => {
    const n = s.current, p = n == null ? void 0 : n.getElementsByTagName("div")[0], v = n == null ? void 0 : n.getElementsByTagName("img")[0];
    n.style.height = t, n.style.width = i, p.style.height = t, p.style.width = i, v.style.height = t, v.style.width = i;
  }, f = () => {
    const t = s.current, i = h.current;
    !(t != null && t.clientWidth) || !(t != null && t.clientHeight) || e.autoHeight || !l || ((x.divide(i == null ? void 0 : i.clientWidth, i == null ? void 0 : i.clientHeight) || 0) > (x.divide(Number(l), Number(d)) || 0) ? w("100%", "auto") : w("auto", "100%"));
  };
  return /* @__PURE__ */ a(G, {
    onResize: f,
    render: () => /* @__PURE__ */ a(q, {
      ref: h,
      $style: e.style,
      $animationStyle: e.animationStyle,
      children: /* @__PURE__ */ a("div", {
        ref: s,
        style: e.autoHeight ? {
          width: "100%",
          height: "100%"
        } : void 0,
        children: /* @__PURE__ */ a(_, {
          src: e.src.value,
          referrerPolicy: "same-origin",
          draggable: !1,
          preview: e.supportPreview,
          fallback: $,
          onClick: () => e.onEvent("click")
        })
      })
    })
  });
}, ee = {
  src: g(L, "https://temp.im/350x400"),
  onEvent: A(K),
  style: C(D, "style"),
  animationStyle: C(F, "animationStyle"),
  autoHeight: g(X, "fixed"),
  supportPreview: T,
  restrictPaddingOnRotation: g(Y, "image")
};
let m = new j(ee, (e) => /* @__PURE__ */ a(Q, {
  ...e
})).setPropertyViewFn((e) => /* @__PURE__ */ u(S, {
  children: [/* @__PURE__ */ a(r, {
    name: o.basic,
    children: e.src.propertyView({
      label: c("image.src")
    })
  }), ["logic", "both"].includes(H(b).editorModeStatus) && /* @__PURE__ */ u(r, {
    name: o.interaction,
    children: [e.onEvent.getPropertyView(), M(e), e.supportPreview.propertyView({
      label: c("image.supportPreview"),
      tooltip: c("image.supportPreviewTip")
    })]
  }), ["layout", "both"].includes(H(b).editorModeStatus) && /* @__PURE__ */ u(S, {
    children: [/* @__PURE__ */ a(r, {
      name: o.layout,
      children: e.autoHeight.getPropertyView()
    }), /* @__PURE__ */ a(r, {
      name: o.style,
      children: e.style.getPropertyView()
    }), /* @__PURE__ */ a(r, {
      name: o.animationStyle,
      hasTooltip: !0,
      children: e.animationStyle.getPropertyView()
    })]
  })]
})).build();
m = class extends m {
  autoHeight() {
    return this.children.autoHeight.getView();
  }
};
const ne = O(m, [new U("src", c("image.srcDesc")), z]);
export {
  ne as ImageComp
};
