import * as s from "react";
import j from "../../../classnames/index.mjs";
import K from "../../../rc-resize-observer/es/index.mjs";
import { composeRef as Q } from "../../../rc-util/es/ref.mjs";
import { responsiveArray as Y } from "../_util/responsiveObserver.mjs";
import { devUseWarning as Z } from "../_util/warning.mjs";
import "../config-provider/index.mjs";
import ee from "../config-provider/hooks/useSize.mjs";
import te from "../grid/hooks/useBreakpoint.mjs";
import se from "./AvatarContext.mjs";
import re from "./style/index.mjs";
import ne from "../config-provider/hooks/useCSSVarCls.mjs";
import { ConfigContext as oe } from "../config-provider/context.mjs";
var ae = globalThis && globalThis.__rest || function(r, p) {
  var f = {};
  for (var o in r)
    Object.prototype.hasOwnProperty.call(r, o) && p.indexOf(o) < 0 && (f[o] = r[o]);
  if (r != null && typeof Object.getOwnPropertySymbols == "function")
    for (var c = 0, o = Object.getOwnPropertySymbols(r); c < o.length; c++)
      p.indexOf(o[c]) < 0 && Object.prototype.propertyIsEnumerable.call(r, o[c]) && (f[o[c]] = r[o[c]]);
  return f;
};
const ie = (r, p) => {
  const [f, o] = s.useState(1), [c, $] = s.useState(!1), [O, E] = s.useState(!0), y = s.useRef(null), v = s.useRef(null), I = Q(p, y), {
    getPrefixCls: _,
    avatar: m
  } = s.useContext(oe), d = s.useContext(se), x = () => {
    if (!v.current || !y.current)
      return;
    const e = v.current.offsetWidth, t = y.current.offsetWidth;
    if (e !== 0 && t !== 0) {
      const {
        gap: a = 4
      } = r;
      a * 2 < t && o(t - a * 2 < e ? (t - a * 2) / e : 1);
    }
  };
  s.useEffect(() => {
    $(!0);
  }, []), s.useEffect(() => {
    E(!0), o(1);
  }, [r.src]), s.useEffect(x, [r.gap]);
  const w = () => {
    const {
      onError: e
    } = r;
    (e == null ? void 0 : e()) !== !1 && E(!1);
  }, {
    prefixCls: A,
    shape: P,
    size: b,
    src: u,
    srcSet: V,
    icon: l,
    className: k,
    rootClassName: W,
    alt: T,
    draggable: D,
    children: S,
    crossOrigin: H
  } = r, h = ae(r, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "rootClassName", "alt", "draggable", "children", "crossOrigin"]), n = ee((e) => {
    var t, a;
    return (a = (t = b ?? (d == null ? void 0 : d.size)) !== null && t !== void 0 ? t : e) !== null && a !== void 0 ? a : "default";
  }), M = Object.keys(typeof n == "object" ? n || {} : {}).some((e) => ["xs", "sm", "md", "lg", "xl", "xxl"].includes(e)), C = te(M), B = s.useMemo(() => {
    if (typeof n != "object")
      return {};
    const e = Y.find((a) => C[a]), t = n[e];
    return t ? {
      width: t,
      height: t,
      lineHeight: `${t}px`,
      fontSize: t && (l || S) ? t / 2 : 18
    } : {};
  }, [C, n]);
  if (process.env.NODE_ENV !== "production") {
    const e = Z("Avatar");
    process.env.NODE_ENV !== "production" && e(!(typeof l == "string" && l.length > 2), "breaking", `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${l}\` at https://ant.design/components/icon`);
  }
  const i = _("avatar", A), N = ne(i), [F, L, U] = re(i, N), X = j({
    [`${i}-lg`]: n === "large",
    [`${i}-sm`]: n === "small"
  }), z = /* @__PURE__ */ s.isValidElement(u), q = P || (d == null ? void 0 : d.shape) || "circle", G = j(i, X, m == null ? void 0 : m.className, `${i}-${q}`, {
    [`${i}-image`]: z || u && O,
    [`${i}-icon`]: !!l
  }, U, N, k, W, L), J = typeof n == "number" ? {
    width: n,
    height: n,
    lineHeight: `${n}px`,
    fontSize: l ? n / 2 : 18
  } : {};
  let g;
  if (typeof u == "string" && O)
    g = /* @__PURE__ */ s.createElement("img", {
      src: u,
      draggable: D,
      srcSet: V,
      onError: w,
      alt: T,
      crossOrigin: H
    });
  else if (z)
    g = u;
  else if (l)
    g = l;
  else if (c || f !== 1) {
    const e = `scale(${f}) translateX(-50%)`, t = {
      msTransform: e,
      WebkitTransform: e,
      transform: e
    }, a = typeof n == "number" ? {
      lineHeight: `${n}px`
    } : {};
    g = /* @__PURE__ */ s.createElement(K, {
      onResize: x
    }, /* @__PURE__ */ s.createElement("span", {
      className: `${i}-string`,
      ref: v,
      style: Object.assign(Object.assign({}, a), t)
    }, S));
  } else
    g = /* @__PURE__ */ s.createElement("span", {
      className: `${i}-string`,
      style: {
        opacity: 0
      },
      ref: v
    }, S);
  return delete h.onError, delete h.gap, F(/* @__PURE__ */ s.createElement("span", Object.assign({}, h, {
    style: Object.assign(Object.assign(Object.assign(Object.assign({}, J), B), m == null ? void 0 : m.style), h.style),
    className: G,
    ref: I
  }), g));
}, R = /* @__PURE__ */ s.forwardRef(ie);
process.env.NODE_ENV !== "production" && (R.displayName = "Avatar");
const Se = R;
export {
  Se as default
};
