"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 _react = _interopRequireDefault(require("react"));

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

var _context = require("../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 = (0, _objectWithoutProperties2.default)(_ref, ["className", "shape", "style", "size", "src", "alt", "children", "onError", "onLoad"]);

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

  var avatarCls = getPrefixClassName('avatar');

  var _React$useState = _react.default.useState(false),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      isImgLoadError = _React$useState2[0],
      setImgLoadError = _React$useState2[1];

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

  var prevSrc = _react.default.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.default.createElement("img", {
        src: src,
        alt: alt,
        onLoad: handleImgLoaded,
        onError: handleImgLoadError
      });
    }

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

    return children;
  };

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

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