import { jsx as s, jsxs as F } from "react/jsx-runtime";
import { useState as R, useMemo as d, useEffect as w } from "react";
import e from "prop-types";
import { useInView as V } from "react-intersection-observer";
import W from "@iconify-icons/material-symbols/warning-rounded";
import X from "@iconify-icons/material-symbols/image-rounded";
import { Icon as k } from "@iconify/react";
import { Box as B } from "@mui/material";
import $ from "lodash/noop";
import { mergeSx as q } from "../Util/style.js";
import { BLOCKLET_SERVICE_PATH_PREFIX as A } from "../Util/constant.js";
const D = (r) => {
  if (!r) return "";
  try {
    return new URL(r).protocol !== "https:" ? (console.warn("Image URL must use HTTPS protocol:", r), "") : `${A}/proxy?url=${encodeURIComponent(r)}`;
  } catch (t) {
    return console.warn("Invalid image URL format:", r, t), "";
  }
}, K = "Img", v = {
  root: `${K}-root`
};
function M({
  lazy: r = !0,
  width: t = null,
  height: f = null,
  repeat: E = "no-repeat",
  ratio: N = 1,
  alt: P = null,
  size: p = "cover",
  position: I = "top center",
  src: n,
  useProxyFallback: b = !1,
  // 是否使用代理 fallback, 用于解决 CSP 的问题
  placeholder: c = null,
  fallback: m = null,
  style: T = null,
  className: j = "",
  onError: h = $,
  onSuccess: L = $,
  ...y
}) {
  const [U, x] = r ? V({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, g] = R("init"), [l, S] = R(!1), a = d(() => m || (b && n ? D(n) : m), [n, b, m]), u = d(() => {
    switch (o) {
      case "init":
      case "loading":
        return c;
      case "error":
        return l ? null : a;
      case "loaded":
        return n;
      default:
        return null;
    }
  }, [c, a, n, o, l]), _ = t && f ? 100 * f / t : N * 100, C = d(
    () => ({
      backgroundImage: u ? `url(${u})` : "",
      backgroundPosition: I,
      backgroundSize: p,
      backgroundRepeat: E,
      paddingTop: `${_}%`
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [u, I, p, o]
  ), H = {
    ...T,
    display: "inline-block",
    width: t ? `${t}px` : "100%"
  };
  function O() {
    const i = new Image();
    i.src = n, g("loading"), S(!1), i.onload = () => {
      g("loaded"), L();
    }, i.onerror = () => {
      g("error");
    };
  }
  return w(() => {
    x && O();
  }, [x]), w(() => {
    if (o === "error" && a && !l) {
      const i = new Image();
      i.src = a, i.onload = () => {
      }, i.onerror = (z) => {
        S(!0), o === "error" && h(z);
      };
    }
  }, [o, a, l, h]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
  /* @__PURE__ */ s(
    B,
    {
      "data-id": "2",
      ref: U,
      style: H,
      className: "arcblock_ux_img-wrapper",
      ...y,
      sx: q(
        {
          [`& .${v.root}`]: {
            position: "relative",
            overflow: "hidden",
            "& .image--state, & .image--img": {
              minWidth: "100%",
              minHeight: "100%",
              position: "absolute",
              top: 0,
              left: "50%",
              transform: "translateX(-50%)"
            },
            "& .image--state": {
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              color: "#999",
              background: "#eee",
              width: "100%",
              height: "100%"
            },
            "& .image--img": {
              opacity: 0,
              visibility: "hidden"
            },
            "& .image--icon": {
              fontSize: 30,
              maxWidth: "80%",
              maxHeight: "80%"
            }
          }
        },
        y.sx
      ),
      children: /* @__PURE__ */ F("div", { className: `image ${j} ${v.root}`, style: C, children: [
        (l || !a && o === "error") && /* @__PURE__ */ s("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ s(k, { icon: W, className: "image--icon" }) }),
        !c && o === "loading" && /* @__PURE__ */ s("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ s(k, { icon: X, className: "image--icon" }) }),
        o === "loaded" && /* @__PURE__ */ s("img", { className: "image--img", src: n, alt: P })
      ] })
    }
  );
}
M.propTypes = {
  src: e.string.isRequired,
  alt: e.string,
  size: e.string,
  position: e.string,
  style: e.object,
  ratio: e.number,
  repeat: e.string,
  width: e.number,
  height: e.number,
  lazy: e.bool,
  placeholder: e.string,
  fallback: e.string,
  className: e.string,
  onError: e.func,
  onSuccess: e.func,
  useProxyFallback: e.bool
};
export {
  M as default
};
