import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

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) { _defineProperty(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; }

import { createBEM } from '@zarm-design/bem';
import React, { createRef, useContext, useState } from 'react';
import { ConfigContext } from '../config-provider';
import ImagePreview from '../image-preview';
import LazyDetector from './lazy-detector';
export var IMAGE_STATUS = {
  PENDING: 'pending',
  LOADING: 'loading',
  LOADED: 'loaded',
  FAILED: 'failed'
};
var Image = /*#__PURE__*/React.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 = _objectWithoutProperties(props, ["src", "placeholder", "fallback", "alt", "onLoad", "onError", "onClick", "className", "width", "height", "style", "fit", "shape", "preview", "lazy"]);

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

  var _useState3 = useState(!lazy),
      _useState4 = _slicedToArray(_useState3, 2),
      initialized = _useState4[0],
      setInitialized = _useState4[1];

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

  var bem = createBEM('image', {
    prefixCls: prefixCls
  });
  var cls = bem([_defineProperty({}, "".concat(shape), !!shape), className]);
  var imgRef = ref || /*#__PURE__*/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.show({
        images: [src || ''],
        orientation: orientation
      });
    }

    onClick && onClick(event);
  };

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

      return /*#__PURE__*/React.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;
  }), _defineProperty(_renderImageStatus, IMAGE_STATUS.LOADING, function () {
    if (placeholder) {
      var _locale$Image2;

      return /*#__PURE__*/React.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.createElement("div", {
    className: cls,
    style: _objectSpread({
      width: width,
      height: height
    }, style)
  }, lazy && !initialized && /*#__PURE__*/React.createElement(LazyDetector, {
    onActive: function onActive() {
      setInitialized(true);
    }
  }), /*#__PURE__*/React.createElement("img", _extends({
    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
};
export default Image;