"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _constants = require("./constants");
var _Loader = _interopRequireDefault(require("../Loader"));
var _assets = require("./assets");
var _AvatarSt = require("./Avatar.st.css.js");
var _cssClassUtils = require("../utils/cssClassUtils");
var _stringToColor = _interopRequireDefault(require("./string-to-color"));
var _AvatarCore = _interopRequireDefault(require("./AvatarCore"));
var _excluded = ["size", "presence", "indication", "color", "customIndication", "onIndicationClick", "dataHook", "className", "shape", "text", "placeholder", "name", "onClick", "showIndicationOnHover", "loading"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Avatar/Avatar.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var getSizeNumber = function getSizeNumber(size) {
  return Number(size.substring(4));
};
var defaultSize = 48;
var minSmallIconButton = 60;

/**
 * Avatar is a type of element that visually represents a user, either as an image, name initials or placeholder icon.
 */
var Avatar = /*#__PURE__*/function (_React$PureComponent) {
  function Avatar(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, Avatar);
    _this = _callSuper(this, Avatar, [props]);
    _this._onMouseEnter = function () {
      if (_this.props.showIndicationOnHover) {
        _this.setState({
          showIndication: true
        });
      }
    };
    _this._onMouseLeave = function () {
      if (_this.props.showIndicationOnHover) {
        _this.setState({
          fadeIndication: true
        });
        setTimeout(function () {
          return _this.setState({
            fadeIndication: false,
            showIndication: false
          });
        }, 150);
      }
    };
    _this.state = {
      fadeIndication: false,
      showIndication: false
    };
    return _this;
  }
  (0, _inherits2["default"])(Avatar, _React$PureComponent);
  return (0, _createClass2["default"])(Avatar, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        size = _this$props.size,
        presence = _this$props.presence,
        indication = _this$props.indication,
        color = _this$props.color,
        customIndication = _this$props.customIndication,
        onIndicationClick = _this$props.onIndicationClick,
        dataHook = _this$props.dataHook,
        className = _this$props.className,
        shape = _this$props.shape,
        text = _this$props.text,
        placeholder = _this$props.placeholder,
        name = _this$props.name,
        onClick = _this$props.onClick,
        showIndicationOnHover = _this$props.showIndicationOnHover,
        loading = _this$props.loading,
        rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
      var _this$state = this.state,
        fadeIndication = _this$state.fadeIndication,
        showIndication = _this$state.showIndication;
      var calculatedColor = color || (0, _stringToColor["default"])(text || name); // if color is provided as a prop use it, otherwise, generate a color based on the text
      var sizeNumber = getSizeNumber(size);
      var renderOnHover = !showIndicationOnHover || showIndication;
      var indicationConstraints = renderOnHover && sizeNumber >= defaultSize;
      var renderIndication = indicationConstraints && !customIndication && indication;
      var renderCustomIndication = indicationConstraints && customIndication;
      var renderLoader = loading && sizeNumber >= defaultSize;
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": dataHook,
        className: (0, _AvatarSt.st)(className, _AvatarSt.classes.root),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.avatarWSR,
        onMouseEnter: this._onMouseEnter,
        onMouseLeave: this._onMouseLeave,
        className: (0, _AvatarSt.st)(_AvatarSt.classes.avatarContainer, {
          shape: shape,
          size: size,
          indication: Boolean(customIndication || indication),
          presence: Boolean(presence),
          presenceType: presence,
          clickable: !!onClick,
          fade: fadeIndication,
          hasText: !!text
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 75,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _AvatarSt.classes.coreAvatar,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 90,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_AvatarCore["default"], (0, _extends2["default"])({}, rest, {
        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react["default"].createElement(AvatarDefaultPlaceholder, {
          shape: shape,
          size: size,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 95,
            columnNumber: 19
          }
        }),
        text: text,
        name: name,
        onClick: onClick,
        initialsLimit: sizeNumber < 30 ? 1 : undefined,
        "data-hook": _constants.dataHooks.avatarCore,
        className: (0, _AvatarSt.st)(_AvatarSt.classes.avatar, _AvatarSt.classes["color".concat((0, _cssClassUtils.capitalize)(calculatedColor))]),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 13
        }
      }))), renderLoader && [/*#__PURE__*/_react["default"].createElement("div", {
        key: "overlay",
        className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.overlay),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110,
          columnNumber: 13
        }
      }), /*#__PURE__*/_react["default"].createElement("div", {
        key: "loader",
        className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.loader),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 114,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
        dataHook: _constants.dataHooks.loader,
        size: "tiny",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 118,
          columnNumber: 15
        }
      }))], presence && /*#__PURE__*/_react["default"].createElement("div", {
        className: _AvatarSt.classes.presence,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 121,
          columnNumber: 24
        }
      }), renderIndication && /*#__PURE__*/_react["default"].createElement("div", {
        className: _AvatarSt.classes.indication,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 123,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        className: _AvatarSt.classes.iconButtonShadow,
        dataHook: _constants.dataHooks.indication,
        skin: "light",
        onClick: onIndicationClick,
        shape: shape,
        size: sizeNumber > minSmallIconButton ? 'small' : 'tiny',
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 124,
          columnNumber: 15
        }
      }, indication)), renderCustomIndication && /*#__PURE__*/_react["default"].createElement("div", {
        className: _AvatarSt.classes.indication,
        "data-hook": _constants.dataHooks.customIndication,
        onClick: onIndicationClick,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 137,
          columnNumber: 13
        }
      }, customIndication)));
    }
  }]);
}(_react["default"].PureComponent);
var AvatarDefaultPlaceholder = function AvatarDefaultPlaceholder(_ref) {
  var shape = _ref.shape,
    size = _ref.size;
  return shape !== _constants.avatarShapes.square ? _assets.placeholderSVGs[size][_constants.avatarShapes.circle] : _assets.placeholderSVGs[size][_constants.avatarShapes.square];
};
Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
  size: 'size48',
  shape: 'circle',
  showIndicationOnHover: false
};
var _default = exports["default"] = Avatar;