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 React from 'react';
import cx from 'classnames';
import { ConfigContext } from '../config-provider/context';

var Avatar = function Avatar(_ref) {
  var className = _ref.className,
      shape = _ref.shape,
      style = _ref.style,
      size = _ref.size,
      src = _ref.src,
      alt = _ref.alt,
      children = _ref.children,
      onError = _ref.onError,
      onLoad = _ref.onLoad,
      otherProps = _objectWithoutProperties(_ref, ["className", "shape", "style", "size", "src", "alt", "children", "onError", "onLoad"]);

  // state
  var _React$useContext = React.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName;

  var avatarCls = getPrefixClassName('avatar');

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isImgLoadError = _React$useState2[0],
      setImgLoadError = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      isImgLoaded = _React$useState4[0],
      setImgLoaded = _React$useState4[1];

  var prevSrc = React.useRef('');

  if (typeof src !== 'undefined' && src !== prevSrc.current) {
    setImgLoaded(false);
    setImgLoadError(false);
  }

  prevSrc.current = src;

  var getSizeSuffixCls = function getSizeSuffixCls() {
    if (size === 'large') return 'lg';
    if (size === 'small') return 'sm';
    return '';
  }; // handle


  var handleImgLoaded = function handleImgLoaded() {
    if (!isImgLoaded) {
      setImgLoaded(true);
      onLoad === null || onLoad === void 0 ? void 0 : onLoad();
    }
  };

  var handleImgLoadError = function handleImgLoadError() {
    if (!isImgLoadError) {
      setImgLoadError(true);
      onError === null || onError === void 0 ? void 0 : onError();
    }
  }; // render


  var sizeSuffixCls = getSizeSuffixCls();

  var renderChildren = function renderChildren() {
    if (typeof src === 'string' && !isImgLoadError) {
      return /*#__PURE__*/React.createElement("img", {
        src: src,
        alt: alt,
        onLoad: handleImgLoaded,
        onError: handleImgLoadError
      });
    }

    if (typeof children === 'string') {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(avatarCls, "-string-child")
      }, children);
    }

    return children;
  };

  return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
    className: cx(avatarCls, sizeSuffixCls && "".concat(avatarCls, "-").concat(sizeSuffixCls), shape && "".concat(avatarCls, "-").concat(shape), src && isImgLoaded && "".concat(avatarCls, "-image"), typeof children === 'string' && "".concat(avatarCls, "-string"), className),
    style: _objectSpread(_objectSpread({}, typeof size === 'number' && {
      height: size,
      width: size
    }), style)
  }), renderChildren());
};

Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
  shape: 'circle',
  size: 'medium'
};
export default Avatar;