"use strict";
const React = require("react");
const classNames = require("../_util/classNames.js");
const index = require("../ConfigProvider/index.js");
const index$2 = require("../../icon/react-icon/IconLoading/index.js");
const index$1 = require("../../icon/react-icon/IconImageClose/index.js");
const imageFooter = require("./image-footer.js");
const imagePreview = require("./image-preview.js");
const imagePreviewGroup = require("./image-preview-group.js");
const useShowFooter = require("./utils/hooks/useShowFooter.js");
const useImageStatus = require("./utils/hooks/useImageStatus.js");
const useMergeValue = require("../_util/hooks/useMergeValue.js");
const omit = require("../_util/omit.js");
const is = require("../_util/is.js");
const previewGroupContext = require("./previewGroupContext.js");
const dom = require("../_util/dom.js");
const useMergeProps = require("../_util/hooks/useMergeProps.js");
const emotionReactJsxRuntime_browser_esm = require("../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
var __assign = globalThis && globalThis.__assign || function() {
  __assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p))
          t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = globalThis && globalThis.__rest || function(s, e) {
  var t = {};
  for (var p in s)
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
      t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
var __read = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m)
    return o;
  var i = m.call(o), r, ar = [], e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
      ar.push(r.value);
  } catch (error) {
    e = {
      error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"]))
        m.call(i);
    } finally {
      if (e)
        throw e.error;
    }
  }
  return ar;
};
var uuid = 0;
var defaultProps = {
  footerPosition: "inner",
  preview: true
};
function Image(baseProps, ref) {
  var _a;
  var _b = React.useContext(index.ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig = _b.componentConfig, rtl = _b.rtl;
  var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Image);
  var style = props.style, className = props.className, src = props.src, width = props.width, height = props.height, title = props.title, description = props.description, actions = props.actions, footerPosition = props.footerPosition, simple = props.simple, loader = props.loader, loaderClassName = props.loaderClassName, error = props.error, preview = props.preview, _c = props.previewProps, previewProps = _c === void 0 ? {} : _c, alt = props.alt, onClick = props.onClick, index$3 = props.index, _index = props._index, onError = props.onError, onLoad = props.onLoad, restProps = __rest(props, ["style", "className", "src", "width", "height", "title", "description", "actions", "footerPosition", "simple", "loader", "loaderClassName", "error", "preview", "previewProps", "alt", "onClick", "index", "_index", "onError", "onLoad"]);
  var _d = React.useContext(previewGroupContext.PreviewGroupContext), previewGroup = _d.previewGroup, handleGroupVisibleChange = _d.handleVisibleChange, registerPreviewUrl = _d.registerPreviewUrl, registerPreviewProps = _d.registerPreviewProps, setCurrentIndex = _d.setCurrentIndex;
  var previewSrc = previewProps.src || src;
  var id = React.useMemo(function() {
    if (is.isNumber(index$3) || is.isNumber(_index)) {
      uuid = is.isNumber(index$3) ? index$3 : _index;
      return uuid;
    }
    return uuid++;
  }, []);
  var _e = __read(useShowFooter({
    title,
    description,
    actions
  }), 1), showFooter = _e[0];
  var _f = useImageStatus("beforeLoad"), isLoading = _f.isLoading, isError = _f.isError, isLoaded = _f.isLoaded, setStatus = _f.setStatus;
  var _g = __read(useMergeValue(false, {
    defaultValue: previewProps.defaultVisible,
    value: previewProps.visible
  }), 2), previewVisible = _g[0], setPreviewVisible = _g[1];
  var availablePreviewProps = omit(previewProps, ["visible", "defaultVisible", "src", "onVisibleChange"]);
  var prefixCls = getPrefixCls("image");
  var isControlled = !is.isUndefined(previewProps.visible);
  var classNames$1 = classNames(prefixCls, (_a = {}, _a[prefixCls + "-rtl"] = rtl, _a[prefixCls + "-simple"] = simple, _a[prefixCls + "-loading"] = isLoading, _a[prefixCls + "-loading-error"] = isError, _a[prefixCls + "-with-footer-inner"] = isLoaded && showFooter && footerPosition === "inner", _a[prefixCls + "-with-footer-outer"] = isLoaded && showFooter && footerPosition === "outer", _a[prefixCls + "-with-preview"] = isLoaded && preview && !isError && !isControlled, _a), className);
  var refImg = React.useRef();
  function onImgLoaded(e) {
    setStatus("loaded");
    onLoad && onLoad(e);
  }
  function onImgLoadError(e) {
    setStatus("error");
    onError && onError(e);
  }
  function onImgClick(e) {
    if (preview && previewGroup) {
      setCurrentIndex(id);
      handleGroupVisibleChange(true);
    } else if (preview) {
      togglePreviewVisible(true);
    }
    onClick && onClick(e);
  }
  function togglePreviewVisible(newVisible) {
    previewProps.onVisibleChange && previewProps.onVisibleChange(newVisible, previewVisible);
    setPreviewVisible(newVisible);
  }
  React.useEffect(function() {
    if (dom.isServerRendering || !refImg.current)
      return;
    refImg.current.src = src;
    setStatus("loading");
  }, [src]);
  React.useEffect(function() {
    if (!previewGroup)
      return;
    var unRegister = registerPreviewUrl(id, previewSrc, preview);
    var unRegisterPreviewProps = registerPreviewProps(id, availablePreviewProps);
    return function() {
      unRegister(id);
      unRegisterPreviewProps(id);
    };
  }, [previewGroup]);
  React.useEffect(function() {
    if (!previewGroup)
      return;
    registerPreviewUrl(id, previewSrc, preview);
  }, [previewSrc, preview, previewGroup]);
  var defaultError = /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
    className: prefixCls + "-error",
    children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
      className: prefixCls + "-error-icon",
      children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$1, {})
    }), alt && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
      className: prefixCls + "-error-alt",
      children: alt
    })]
  });
  var defaultLoader = /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
    className: prefixCls + "-loader",
    children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
      className: prefixCls + "-loader-spin",
      children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$2, {}), /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
        className: prefixCls + "-loader-spin-text",
        children: "Loading"
      })]
    })
  });
  var renderLoader = function() {
    if (loader === true)
      return defaultLoader;
    if (loaderClassName)
      return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
        className: classNames(prefixCls + "-loader", loaderClassName)
      });
    return loader || null;
  };
  return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
    className: classNames$1,
    style: Object.assign({
      width,
      height
    }, style),
    ref,
    children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("img", {
      ...__assign({
        ref: refImg,
        className: prefixCls + "-img"
      }, restProps, {
        title,
        width,
        height,
        onLoad: onImgLoaded,
        onError: onImgLoadError,
        onClick: onImgClick,
        alt
      })
    }), !isLoaded && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
      className: prefixCls + "-overlay",
      children: [isError && (error || defaultError), isLoading && renderLoader()]
    }), isLoaded && showFooter && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(imageFooter.ImageFooter, {
      title,
      description,
      actions,
      prefixCls,
      simple
    }), isLoaded && preview && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(imagePreview, {
      ...__assign({
        visible: previewVisible,
        src: previewSrc
      }, availablePreviewProps, {
        onVisibleChange: togglePreviewVisible
      })
    })]
  });
}
var RefImageComponent = React__default.default.forwardRef(Image);
var ImageComponent = RefImageComponent;
ImageComponent.Preview = imagePreview;
ImageComponent.PreviewGroup = imagePreviewGroup;
ImageComponent.displayName = "Image";
const Image$1 = ImageComponent;
module.exports = Image$1;
//# sourceMappingURL=image.js.map
