import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import React from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import Preview from './image-preview';
import { ConfigContext } from '../config-provider/context';
var ZoomInLine = Icon.ZoomInLine,
    LoadFailFill = Icon.LoadFailFill;

function isObject(obj) {
  return _typeof(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 = _objectWithoutProperties(props, ["prefixCls", "alt", "functions", "width", "height", "src", "previewSrc", "fallback", "style", "preview", "multiple", "images", "id", "fit", "className", "onError", "onClick", "getContainer"]);

  var _React$useState = React.useState(src),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      imageSrc = _React$useState2[0],
      setImageSrc = _React$useState2[1];

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

  var imageRef = React.useRef(null);
  imageRef = ref || imageRef;

  var _React$useContext = React.useContext(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 = classNames("".concat(imagePrefixCls, "-img"), fit && "".concat(imagePrefixCls, "-img-").concat(fit));

  var renderImageContent = function renderImageContent() {
    var child = /*#__PURE__*/React.createElement(React.Fragment, null, imageSrc !== 'error' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", Object.assign({
      src: imageSrc,
      className: imgCls,
      ref: imageRef,
      onError: onImageError,
      onLoad: onImageLoad,
      alt: alt
    }, resetProps)), preview && /*#__PURE__*/React.createElement("div", {
      onClick: function onClick() {
        return handleModalVisible(true);
      },
      className: "".concat(imagePrefixCls, "-mask")
    }, /*#__PURE__*/React.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.createElement("div", {
          ref: imageRef,
          style: size,
          className: "".concat(imagePrefixCls, "-defaultError")
        }, /*#__PURE__*/React.createElement(LoadFailFill, null));
      } else {
        child = /*#__PURE__*/React.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.createElement(Preview, {
      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.createElement("div", {
    className: classNames(imagePrefixCls, className),
    style: _objectSpread({
      width: width,
      height: height
    }, style),
    onClick: onClick
  }, renderImageContent(), renderPreview());
};

var Image = /*#__PURE__*/React.forwardRef(ImageRefFunction);
Image.Preview = Preview;
Image.defaultProps = {
  preview: true,
  functions: false
};
export default Image;