'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _iconsData = require('@collab-ui/icons/data/iconsData.json');

var _iconsData2 = _interopRequireDefault(_iconsData);

var _colors = require('@collab-ui/core/data/colors.json');

var _colors2 = _interopRequireDefault(_colors);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

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

var count = 0; /**
                * @category styles
                * @component icon
                * @variations collab-ui-react
                */

var Icon = function Icon(props) {
  var name = props.name,
      size = props.size,
      className = props.className,
      color = props.color,
      title = props.title,
      description = props.description,
      isAria = props.isAria,
      otherHTMLProps = (0, _objectWithoutProperties3.default)(props, ['name', 'size', 'className', 'color', 'title', 'description', 'isAria']);

  var iconCount = count++;
  var titleId = 'icon-title-' + iconCount;
  var descId = description ? 'icon-desc-' + iconCount : undefined;

  var consoleHandler = function consoleHandler(message, data) {
    /* eslint-disable no-console */
    switch (message) {
      case 'color-warn':
        console.warn(data + ' may not exist in the design system,' + ' please use a color name from http://collab-ui.cisco.com/styles/colors');
        break;
      case 'color-error':
        throw new Error(data + ' does not exist in the design system,' + ' please use a color name from http://collab-ui.cisco.com/styles/colors');
      case 'name-error':
        throw new Error('Icon ' + data + ' does not exist in the design system.' + ' Visit http://collab-ui-icons.cisco.com for a list of available icons or to request a new icon.');
    }
    /* eslint-enable no-console */
  };

  var getSize = function getSize() {
    var defaultSize = 16;
    var sizeFromName = Number(name.split("_")[1]);
    return size || sizeFromName || defaultSize;
  };

  var getColorSpec = function getColorSpec(colorObj) {
    return colorObj.hex ? colorObj.hex : colorObj.opacity && isolateRoot(colorObj.variable) === 'white' ? 'rgba(255, 255, 255, ' + colorObj.opacity / 100 + ')' : 'rgba(0, 0, 0, ' + colorObj.opacity / 100 + ')';
  };

  var getHexFromJSON = function getHexFromJSON(colorName) {
    for (var _iterator = _colors2.default, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : (0, _getIterator3.default)(_iterator);;) {
      var _ref;

      if (_isArray) {
        if (_i >= _iterator.length) break;
        _ref = _iterator[_i++];
      } else {
        _i = _iterator.next();
        if (_i.done) break;
        _ref = _i.value;
      }

      var c = _ref;

      var variation = _lodash2.default.find(c.variations, ['variable', colorName]);

      if (variation) return getColorSpec(variation);
    }

    return consoleHandler('color-error', colorName);
  };

  var isolateRoot = function isolateRoot(str) {
    return _lodash2.default.chain(str).trimStart('$').split('-').value()[0];
  };

  var formatColor = function formatColor() {
    return color.startsWith('$') ? color : color.endsWith('-base') ? _lodash2.default.trimEnd(color, '-base') : '$' + color;
  };

  var getColor = function getColor() {
    if (!color) return 'inherit';

    if (color.startsWith('#')) {
      consoleHandler('color-warn', color);

      return color;
    }

    return getHexFromJSON(formatColor());
  };

  var getPaths = function getPaths() {
    var iconName = name.startsWith('icon-') ? _lodash2.default.trimStart(name, 'icon-') : name;

    return _iconsData2.default[iconName] ? _iconsData2.default[iconName].map(function (icoPath, index) {
      return _react2.default.createElement('path', { d: icoPath, key: index });
    }) : consoleHandler('name-error', iconName);
  };

  var getAria = function getAria() {
    return description ? titleId + ' ' + descId : '' + titleId;
  };

  var getTitle = function getTitle() {
    return !title ? _lodash2.default.startCase(name) : title;
  };

  return _react2.default.createElement(
    'svg',
    (0, _extends3.default)({
      className: 'cui-icon' + ('' + (className && ' ' + className || '')),
      width: getSize(),
      height: getSize(),
      'aria-labelledby': isAria ? getAria() : undefined
    }, otherHTMLProps),
    isAria && _react2.default.createElement(
      'title',
      { id: titleId },
      getTitle()
    ),
    description && isAria && _react2.default.createElement(
      'desc',
      { id: descId },
      description
    ),
    _react2.default.createElement(
      'g',
      { fill: getColor(), fillRule: 'evenodd' },
      getPaths()
    )
  );
};

Icon.defaultProps = {
  color: '',
  className: '',
  isAria: true
};

Icon.displayName = 'Icon';

exports.default = Icon;
module.exports = exports['default'];