'use strict';

exports.__esModule = true;

var _fromCodePoint = require('babel-runtime/core-js/string/from-code-point');

var _fromCodePoint2 = _interopRequireDefault(_fromCodePoint);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

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

var _ref = _react2.default.createElement(_.Loading, null);

var _ref2 = _react2.default.createElement('span', { className: 'cui-avatar__failure-badge' });

var Avatar = function (_React$Component) {
  (0, _inherits3.default)(Avatar, _React$Component);

  function Avatar() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Avatar);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(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
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Avatar.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        alt = _props.alt,
        backgroundColor = _props.backgroundColor,
        color = _props.color,
        hideDefaultTooltip = _props.hideDefaultTooltip,
        isOverview = _props.isOverview,
        src = _props.src,
        title = _props.title,
        type = _props.type,
        size = _props.size,
        className = _props.className,
        icon = _props.icon,
        failureBadge = _props.failureBadge;
    var _state = this.state,
        isImageLoaded = _state.isImageLoaded,
        isImageErrored = _state.isImageErrored;


    var getInitials = function getInitials() {
      var letters = [];
      var words = title.split(/ +/);
      var repeatTimes = Math.min(type === 'group' && 1 || 2, words.length);
      for (var i = 0; i < repeatTimes; i++) {
        letters.push((0, _fromCodePoint2.default)(words[i].codePointAt(0)));
      }
      return letters.join('');
    };

    var getIcon = function getIcon() {
      if (icon.type.displayName === 'Icon') {
        return _react2.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 _react2.default.createElement(
        'span',
        {
          key: 'letter',
          className: 'cui-avatar__letter',
          style: { backgroundColor: backgroundColor, color: color }
        },
        getInitials()
      );
    };

    var getChildren = function getChildren() {
      // image src is present and image has not yet errored
      if (src && !isImageErrored) {
        var imgChildren = [];
        // image is not loaded and title is provided
        if (title && !isImageLoaded) {
          imgChildren.push(getLetter());
        }
        imgChildren.push(_react2.default.createElement('img', {
          key: 'image',
          alt: alt,
          className: 'cui-avatar__img' + ('' + (!isImageLoaded && ' cui-avatar__img--hidden' || '')),
          draggable: false,
          onError: _this2.handleImgError,
          onLoad: _this2.handleImgLoaded,
          src: src
        }));
        return imgChildren;
      } else if (icon) {
        return getIcon();
      } else if (title) {
        return getLetter();
      }
    };

    return _react2.default.createElement(
      'div',
      {
        className: 'cui-avatar' + ('' + (type && ' cui-avatar--' + type || '')) + (' cui-avatar--' + size) + ('' + (className && ' ' + className || '')),
        title: !hideDefaultTooltip ? title : ''
      },
      getChildren(),
      type === 'typing' && _ref,
      failureBadge && _ref2
    );
  };

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

Avatar.displayName = 'Avatar';
exports.default = Avatar;


Avatar.defaultProps = {
  alt: '',
  backgroundColor: '',
  className: null,
  color: '',
  hideDefaultTooltip: false,
  isOverview: false,
  size: 'medium',
  src: null,
  title: null,
  type: '',
  icon: null,
  failureBadge: false
};

/**
* @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">medium(default)</span></p>
          <div><Avatar size="medium" title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">small</span></p>
          <div><Avatar size="small" title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">xsmall</span></p>
          <div><Avatar size="xsmall" title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">large</span></p>
          <div><Avatar size="large" title="Tom Smith"/></div>
          <br></br>

          <p><span className="h3">xlarge</span></p>
          <div><Avatar size="xlarge" 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">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">medium(Default Size)</span></p>
          <div>
          <CompositeAvatar>
            <Avatar title="Tom Smith"/>
            <Avatar title="John William"/>
          </CompositeAvatar>
          </div>
          <br></br>

          <p><span className="h3">small</span></p>
          <div>
            <CompositeAvatar size="small">
              <Avatar title="Tom Smith"/>
              <Avatar title="John William"/>
            </CompositeAvatar>
          </div>
          <br></br>

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

module.exports = exports['default'];