import { b9 as N, co as B, ca as R, cb as W, w as v, ct as j, bL as k, bB as D, cu as M, cv as T, bv as U, U as z, V as n, P as g, bh as y, bi as o, bj as c, a0 as l, bg as C, bl as A, bn as F, bo as L, bG as _, cw as G, cx as x, c1 as H, cy as O, cz as q } from "./684d2f28.js";
import { useContext as P, useRef as $, useState as E, useEffect as I } from "react";
import "react-dom";
const J = N.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.$style && K(e.$style)}
`, K = (e) => B`
    img {
      border: ${(r) => e.borderWidth ? e.borderWidth : "1px"} solid ${e.border};
      border-radius: ${e.radius};
      margin: ${e.margin};
      padding: ${e.padding};
      max-width: ${R(e.margin)};
      max-height: ${W(e.margin)};
    }

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