"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = _interopRequireDefault(require("../icon"));

var _imagePreview = _interopRequireDefault(require("./image-preview"));

var _context = require("../config-provider/context");

var ZoomInLine = _icon.default.ZoomInLine,
    LoadFailFill = _icon.default.LoadFailFill;

function isObject(obj) {
  return (0, _typeof2.default)(obj) === 'object' && obj !== null && Object.getPrototypeOf(obj) === Object.prototype;
}

var ImageRefFunction = function ImageRefFunction(props, ref) {
  var customPrefixCls = props.prefixCls,
      alt = props.alt,
      functions = props.functions,
      width = props.width,
      height = props.height,
      src = props.src,
      previewSrc = props.previewSrc,
      fallback = props.fallback,
      style = props.style,
      preview = props.preview,
      multiple = props.multiple,
      images = props.images,
      id = props.id,
      fit = props.fit,
      className = props.className,
      onError = props.onError,
      onClick = props.onClick,
      imageGetPopupContainer = props.getContainer,
      resetProps = (0, _objectWithoutProperties2.default)(props, ["prefixCls", "alt", "functions", "width", "height", "src", "previewSrc", "fallback", "style", "preview", "multiple", "images", "id", "fit", "className", "onError", "onClick", "getContainer"]);

  var _React$useState = _react.default.useState(src),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      imageSrc = _React$useState2[0],
      setImageSrc = _React$useState2[1];

  var _React$useState3 = _react.default.useState(isObject(preview) ? preview.visible : false),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      visible = _React$useState4[0],
      setVisible = _React$useState4[1];

  var imageRef = _react.default.useRef(null);

  imageRef = ref || imageRef;

  var _React$useContext = _react.default.useContext(_context.ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName,
      getPopupContainer = _React$useContext.getPopupContainer;

  if (src && src !== imageSrc) {
    setImageSrc(src);
  }

  if (isObject(preview) && preview.visible !== visible) {
    setVisible(preview.visible);
  }

  var imagePrefixCls = getPrefixClassName('image', customPrefixCls);
  var curImage = images === null || images === void 0 ? void 0 : images.find(function (item) {
    return item.uid === id;
  });
  var curImgIndex = curImage ? images === null || images === void 0 ? void 0 : images.indexOf(curImage) : 0;

  var onImageError = function onImageError(e) {
    setImageSrc('error');
    onError === null || onError === void 0 ? void 0 : onError(e);
  };

  var onImageLoad = function onImageLoad() {
    setImageSrc(src);
  };

  var handleModalVisible = function handleModalVisible(isVisible) {
    if (preview) {
      if (isObject(preview)) {
        var _preview$onVisibleCha;

        (_preview$onVisibleCha = preview.onVisibleChange) === null || _preview$onVisibleCha === void 0 ? void 0 : _preview$onVisibleCha.call(preview, isVisible);

        if (typeof preview.visible !== 'undefined') {
          return;
        }
      }

      setVisible(isVisible);
    }
  };

  var imgCls = (0, _classnames.default)("".concat(imagePrefixCls, "-img"), fit && "".concat(imagePrefixCls, "-img-").concat(fit));

  var renderImageContent = function renderImageContent() {
    var child = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imageSrc !== 'error' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", Object.assign({
      src: imageSrc,
      className: imgCls,
      ref: imageRef,
      onError: onImageError,
      onLoad: onImageLoad,
      alt: alt
    }, resetProps)), preview && /*#__PURE__*/_react.default.createElement("div", {
      onClick: function onClick() {
        return handleModalVisible(true);
      },
      className: "".concat(imagePrefixCls, "-mask")
    }, /*#__PURE__*/_react.default.createElement(ZoomInLine, null))) : null);

    if (imageSrc === 'error') {
      if (!fallback) {
        var w = width || 160;
        var wNum = w;
        var h = height || 160;

        if (typeof w === 'string') {
          wNum = parseInt(w.replace(/(px|em|rem|%)$/, ''), 10);
        }

        var size = {
          width: w,
          height: h,
          fontSize: wNum / (10 / 3)
        };
        child = /*#__PURE__*/_react.default.createElement("div", {
          ref: imageRef,
          style: size,
          className: "".concat(imagePrefixCls, "-defaultError")
        }, /*#__PURE__*/_react.default.createElement(LoadFailFill, null));
      } else {
        child = /*#__PURE__*/_react.default.createElement("img", Object.assign({
          src: fallback,
          className: "".concat(imagePrefixCls, "-img"),
          ref: imageRef,
          alt: alt,
          onError: onImageError,
          onLoad: onImageLoad
        }, resetProps));
      }
    }

    return child;
  };

  var renderPreview = function renderPreview() {
    return /*#__PURE__*/_react.default.createElement(_imagePreview.default, {
      visible: visible,
      functions: functions,
      images: multiple ? images : [{
        uid: +new Date(),
        url: previewSrc || imageSrc
      }],
      onClose: function onClose() {
        return handleModalVisible(false);
      },
      curIndex: curImgIndex,
      getContainer: imageGetPopupContainer || getPopupContainer
    });
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(imagePrefixCls, className),
    style: (0, _objectSpread2.default)({
      width: width,
      height: height
    }, style),
    onClick: onClick
  }, renderImageContent(), renderPreview());
};

var Image = /*#__PURE__*/_react.default.forwardRef(ImageRefFunction);

Image.Preview = _imagePreview.default;
Image.defaultProps = {
  preview: true,
  functions: false
};
var _default = Image;
exports.default = _default;