"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _bem = require("@zarm-design/bem");

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

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

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

var _lazyDetector = _interopRequireDefault(require("./lazy-detector"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var IMAGE_STATUS = {
  PENDING: 'pending',
  LOADING: 'loading',
  LOADED: 'loaded',
  FAILED: 'failed'
};
exports.IMAGE_STATUS = IMAGE_STATUS;

var Image = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _renderImageStatus;

  var src = props.src,
      placeholder = props.placeholder,
      fallback = props.fallback,
      alt = props.alt,
      onLoad = props.onLoad,
      onError = props.onError,
      onClick = props.onClick,
      className = props.className,
      width = props.width,
      height = props.height,
      style = props.style,
      fit = props.fit,
      shape = props.shape,
      preview = props.preview,
      lazy = props.lazy,
      restProps = (0, _objectWithoutProperties2.default)(props, ["src", "placeholder", "fallback", "alt", "onLoad", "onError", "onClick", "className", "width", "height", "style", "fit", "shape", "preview", "lazy"]);

  var _useState = (0, _react.useState)(IMAGE_STATUS.LOADING),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      status = _useState2[0],
      setStatus = _useState2[1];

  var _useState3 = (0, _react.useState)(!lazy),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      initialized = _useState4[0],
      setInitialized = _useState4[1];

  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
      prefixCls = _useContext.prefixCls,
      locale = _useContext.locale;

  var bem = (0, _bem.createBEM)('image', {
    prefixCls: prefixCls
  });
  var cls = bem([(0, _defineProperty2.default)({}, "".concat(shape), !!shape), className]);
  var imgRef = ref || /*#__PURE__*/(0, _react.createRef)();
  var inIframe = window.self !== window.top;
  var orientation = inIframe ? 'portrait' : undefined;

  var handleLoad = function handleLoad(event) {
    onLoad && onLoad(event);
    setStatus(IMAGE_STATUS.LOADED);
  };

  var handleError = function handleError(event) {
    onError && onError(event);
    setStatus(IMAGE_STATUS.FAILED);
  };

  var handleClick = function handleClick(event) {
    if (preview) {
      _imagePreview.default.show({
        images: [src || ''],
        orientation: orientation
      });
    }

    onClick && onClick(event);
  };

  var renderImageStatus = (_renderImageStatus = {}, (0, _defineProperty2.default)(_renderImageStatus, IMAGE_STATUS.LOADED, function () {
    return null;
  }), (0, _defineProperty2.default)(_renderImageStatus, IMAGE_STATUS.FAILED, function () {
    if (fallback) {
      var _locale$Image;

      return /*#__PURE__*/_react.default.createElement("div", {
        className: bem('fallback')
      }, typeof fallback === 'boolean' ? locale === null || locale === void 0 ? void 0 : (_locale$Image = locale.Image) === null || _locale$Image === void 0 ? void 0 : _locale$Image.loadFailed : fallback);
    }

    return null;
  }), (0, _defineProperty2.default)(_renderImageStatus, IMAGE_STATUS.LOADING, function () {
    if (placeholder) {
      var _locale$Image2;

      return /*#__PURE__*/_react.default.createElement("div", {
        className: bem('loading')
      }, typeof placeholder === 'boolean' ? locale === null || locale === void 0 ? void 0 : (_locale$Image2 = locale.Image) === null || _locale$Image2 === void 0 ? void 0 : _locale$Image2.loading : placeholder);
    }

    return null;
  }), _renderImageStatus);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: cls,
    style: _objectSpread({
      width: width,
      height: height
    }, style)
  }, lazy && !initialized && /*#__PURE__*/_react.default.createElement(_lazyDetector.default, {
    onActive: function onActive() {
      setInitialized(true);
    }
  }), /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
    className: bem('img'),
    src: initialized ? src : undefined,
    alt: alt,
    ref: imgRef,
    style: {
      objectFit: fit
    }
  }, restProps, {
    onClick: handleClick,
    onError: handleError,
    onLoad: handleLoad
  })), renderImageStatus[status]());
});

Image.displayName = 'Image';
Image.defaultProps = {
  placeholder: false,
  fallback: false,
  fit: 'fill',
  shape: 'rect',
  preview: false,
  lazy: false
};
var _default = Image;
exports.default = _default;