"use strict";

exports.__esModule = true;
exports.default = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Avatar =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Avatar, _React$Component);

  function Avatar() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isImageLoaded: false,
      isImageErrored: false
    };

    _this.handleImgError = function () {
      _this.setState({
        isImageErrored: true
      });
    };

    _this.handleImgLoaded = function () {
      _this.setState({
        isImageLoaded: true
      });
    };

    return _this;
  }

  var _proto = Avatar.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        alt = _this$props.alt,
        backgroundColor = _this$props.backgroundColor,
        buttonClassName = _this$props.buttonClassName,
        className = _this$props.className,
        color = _this$props.color,
        failureBadge = _this$props.failureBadge,
        hideDefaultTooltip = _this$props.hideDefaultTooltip,
        icon = _this$props.icon,
        isOverview = _this$props.isOverview,
        onClick = _this$props.onClick,
        size = _this$props.size,
        src = _this$props.src,
        title = _this$props.title,
        type = _this$props.type,
        otherProps = _objectWithoutProperties(_this$props, ["alt", "backgroundColor", "buttonClassName", "className", "color", "failureBadge", "hideDefaultTooltip", "icon", "isOverview", "onClick", "size", "src", "title", "type"]);

    var _this$state = this.state,
        isImageLoaded = _this$state.isImageLoaded,
        isImageErrored = _this$state.isImageErrored;

    var getInitials = function getInitials() {
      var letters = [];
      var words = title.trim().split(/ +/);
      var repeatTimes = Math.min(type === 'group' && 1 || 2, words.length);

      for (var i = 0; i < repeatTimes; i++) {
        letters.push(String.fromCodePoint(words[i].codePointAt(0)));
      }

      return letters.join('');
    };

    var getIcon = function getIcon() {
      if (icon.type.displayName === 'Icon') {
        return _react.default.createElement("span", {
          className: 'cui-avatar__icon' + ("" + (isOverview ? ' cui-avatar__icon--overview' : '')),
          style: {
            backgroundColor: backgroundColor,
            color: color
          }
        }, icon);
      }

      throw new Error('Icon prop should be a component of type Icon');
    };

    var getLetter = function getLetter() {
      return _react.default.createElement("span", {
        key: "letter",
        className: 'cui-avatar__letter' + ("" + (isImageLoaded && " cui-avatar__img--hidden" || '')),
        style: {
          backgroundColor: backgroundColor,
          color: color
        }
      }, getInitials());
    };

    var getChildren = function getChildren() {
      if (type === 'self') {
        return _react.default.createElement("span", {
          key: "self",
          className: "cui-avatar__self",
          style: {
            backgroundColor: backgroundColor,
            color: color
          }
        }, _react.default.createElement(_.Icon, {
          name: size === 40 || size === 'medium' ? 'chat-active_18' : 'chat-active_16'
        }));
      } else if (src && !isImageErrored) {
        // image src is present and image has not yet errored
        var imgChildren = []; // image is not loaded and title is provided

        if (title && !isImageLoaded) {
          imgChildren.push(getLetter());
        }

        imgChildren.push(_react.default.createElement("img", {
          alt: alt,
          className: "cui-avatar__img" + ("" + (!isImageLoaded && " cui-avatar__img--hidden" || '')),
          draggable: false,
          key: "image-" + imgChildren.length,
          onError: _this2.handleImgError,
          onLoad: _this2.handleImgLoaded,
          src: src
        }));
        return imgChildren;
      } else if (icon) {
        return getIcon();
      } else if (title) {
        return getLetter();
      }
    };

    var getAvatar = function getAvatar() {
      return _react.default.createElement("div", _extends({
        className: 'cui-avatar' + ("" + (type && " cui-avatar--" + type || '')) + ("" + (size && " cui-avatar--" + size || '')) + ("" + (className && " " + className || '')),
        title: !hideDefaultTooltip ? title : ''
      }, !onClick && _extends({}, otherProps)), getChildren(), type === 'typing' && _react.default.createElement(_.Loading, null), failureBadge && _react.default.createElement("span", {
        className: "cui-avatar__failure-badge"
      }));
    };

    return onClick ? _react.default.createElement(_.Button, _extends({
      className: buttonClassName,
      circle: true,
      onClick: onClick,
      removeStyle: true
    }, otherProps), getAvatar()) : getAvatar();
  };

  return Avatar;
}(_react.default.Component);

Avatar.displayName = 'Avatar';
Avatar.propTypes = {
  alt: _propTypes.default.string,
  backgroundColor: _propTypes.default.string,
  buttonClassName: _propTypes.default.string,
  className: _propTypes.default.string,
  color: _propTypes.default.string,
  failureBadge: _propTypes.default.bool,
  hideDefaultTooltip: _propTypes.default.bool,
  icon: _propTypes.default.element,
  isOverview: _propTypes.default.bool,
  onClick: _propTypes.default.func,
  size: _propTypes.default.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 18, 24, 28, 36, 40, 44, 52, 56, 72, 80, 84]),
  src: _propTypes.default.string,
  title: _propTypes.default.string,
  type: _propTypes.default.oneOf(['', 'active', 'inactive', 'dnd', 'ooo', 'group', 'typing', 'bot', 'self'])
};
Avatar.defaultProps = {
  alt: '',
  backgroundColor: '',
  buttonClassName: '',
  className: null,
  color: '',
  failureBadge: false,
  hideDefaultTooltip: false,
  icon: null,
  isOverview: false,
  onClick: null,
  size: 'medium',
  src: null,
  title: null,
  type: ''
};
var _default = Avatar;
/**
* @name Prop: onClick 
*
* @category communication
* @component avatar
* @section click
*
* @js
*

 export default class AvatarClick extends React.PureComponent {
  render() {
    return (
      <div className='row'>
        <div className="example-spacing">

          <div>
            <Avatar onClick={()=>(console.log('Avatar clicked'))} ariaLabel='Click Avatar' title="Tom Smith"/>
          </div>

        </div>
      </div>
    );
  }
}
**/

/**
* @name Different sizes of avatar
*
* @category communication
* @component avatar
* @section default
*
* @js
*

 export default class AvatarDefault extends React.PureComponent {
  render() {
    return (
      <div className='row'>
        <div className="example-spacing">
          <p><span className="h3">size=(18)</span></p>
          <div><Avatar size={18} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(24)</span></p>
          <div><Avatar size={24} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(28)</span></p>
          <div><Avatar size={28} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(36)</span></p>
          <div><Avatar size={36} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(40)</span></p>
          <div><Avatar size={40} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(44)</span></p>
          <div><Avatar size={44} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(52)</span></p>
          <div><Avatar size={52} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(56)</span></p>
          <div><Avatar size={56} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(72)</span></p>
          <div><Avatar size={72} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(80)</span></p>
          <div><Avatar size={80} title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">size=(84)</span></p>
          <div><Avatar size={84} title="Tom Smith"/></div>
        </div>
      </div>
    );
  }
}
**/

/**
* @name Types of Avatar
*
* @category communication
* @component avatar
* @section types
*
* @js
*

 export default class AvatarTypes extends React.PureComponent {
  render() {
    return (
      <div className='row'>
        <div className="example-spacing">
          <p><span className="h3">default</span></p>
          <div><Avatar title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">active</span></p>
          <div><Avatar title="Tom Smith" type="active"/></div>
          <br></br>

          <p><span className="h3">Do not disturb</span></p>
          <div><Avatar title="Tom Smith" type="dnd"/></div>
          <br></br>

          <p><span className="h3">Out of office</span></p>
          <div><Avatar title="Tom Smith" type="ooo"/></div>
          <br></br>

          <p><span className="h3">Group</span></p>
          <div><Avatar title="Tom Smith" type="group"/></div>
          <br></br>

          <p><span className="h3">Bot</span></p>
          <div><Avatar title="Tom Smith" type="bot"/></div>
          <br></br>

          <p><span className="h3">FailureBadge</span></p>
          <div><Avatar title="Tom Smith" failureBadge={true}/></div>
          <br></br>

          <p><span className="h3">Self</span></p>
          <div><Avatar title="Tom Smith" type="self"/></div>
          <br></br>

          <p><span className="h3">Typing</span></p>
          <div><Avatar title="Tom Smith" type="typing"/></div>
          <br></br>

          <p><span className="h3">Inactive</span></p>
          <div><Avatar title="Tom Smith" type="inactive"/></div>
        </div>
      </div>
    );
  }
}
**/

/**
* @name Avatar with different contents
*
* @category communication
* @component avatar
* @section contents
*
* @js
*
 import { Icon } from '@collab-ui/react';
 import libraryIcon from '@collab-ui/core/docs/assets/react.png';

 export default class AvatarContents extends React.PureComponent {
  render() {
    return (
      <div className='row'>
        <div className="example-spacing">
          <p><span className="h3">With image</span></p>
          <div><Avatar title="React" src={libraryIcon}/></div>
          <br></br>

          <p><span className="h3">With icon</span></p>
          <div><Avatar title="Feedback" icon={<Icon name="feedback_16"/>}/></div>
          <br></br>

          <p><span className="h3">With title</span></p>
          <div><Avatar title="Tom Smith"/></div>
          <br></br>
        </div>
      </div>
    );
  }
}
**/

/**
* @name Composite avatars
*
* @category communication
* @component avatar
* @section composite
*
* @js
*
 import { CompositeAvatar } from '@collab-ui/react';

 export default class CompositeAvatarExample extends React.PureComponent {
  render() {
    return (
      <div className='row'>
        <div className="example-spacing">
        
          <p><span className="h3">size=(28)</span></p>
          <div>
          <CompositeAvatar size={28}>
          <Avatar title="Tom Smith"/>
          <Avatar title="John William"/>
          </CompositeAvatar>
          </div>
          <br></br>

          <p><span className="h3">size=(40)</span></p>
          <div>
          <CompositeAvatar size={40}>
            <Avatar title="Tom Smith"/>
            <Avatar title="John William"/>
          </CompositeAvatar>
          </div>
          <br></br>

          <p><span className="h3">size=(84)</span></p>
          <div>
            <CompositeAvatar size={84}>
              <Avatar title="Tom Smith"/>
              <Avatar title="John William"/>
            </CompositeAvatar>
          </div>
          <br></br>

          <p><span className="h3">size=(135)</span></p>
          <div>
            <CompositeAvatar size={135}>
              <Avatar title="Tom Smith"/>
              <Avatar title="John William"/>
            </CompositeAvatar>
          </div>
        </div>
      </div>
    );
  }
}
**/

exports.default = _default;