"use strict";

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

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

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

var _lodash = require("lodash");

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

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

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 Icon =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Icon, _React$PureComponent);

  function Icon() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = Icon.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        buttonClassName = _this$props.buttonClassName,
        color = _this$props.color,
        className = _this$props.className,
        description = _this$props.description,
        isAria = _this$props.isAria,
        onClick = _this$props.onClick,
        name = _this$props.name,
        size = _this$props.size,
        title = _this$props.title,
        type = _this$props.type,
        otherProps = _objectWithoutProperties(_this$props, ["buttonClassName", "color", "className", "description", "isAria", "onClick", "name", "size", "title", "type"]);

    var iconCount = (0, _lodash.uniqueId)();
    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':
          console.warn(data + " does not exist in the design system," + " please use a color name from http://collab-ui.cisco.com/styles/colors");
          break;

        case 'name-error':
          console.warn("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.");
          break;
      }
      /* 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 = _colors.default, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.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 = (0, _lodash.find)(c.variations, ['variable', colorName]);
        if (variation) return getColorSpec(variation);
      }

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

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

    var formatColor = function formatColor() {
      return color.startsWith('$') ? color : color.endsWith('-base') ? (0, _lodash.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-') ? (0, _lodash.trimStart)(name, 'icon-') : name;
      return _iconsData.default[iconName] ? _iconsData.default[iconName].map(function (icoPath, index) {
        return _react.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 ? (0, _lodash.startCase)(name) : title;
    };

    var getIcon = function getIcon() {
      return _react.default.createElement("svg", _extends({
        className: "cui-icon" + ("" + (className && " " + className || '')),
        width: getSize(),
        height: getSize(),
        "aria-labelledby": isAria ? getAria() : undefined
      }, !onClick && _extends({}, otherProps)), isAria && _react.default.createElement("title", {
        id: titleId
      }, getTitle()), description && isAria && _react.default.createElement("desc", {
        id: descId
      }, description), _react.default.createElement("g", {
        fill: getColor(),
        fillRule: "evenodd"
      }, getPaths()));
    };

    return onClick ? _react.default.createElement(_.Button, _extends({
      className: 'cui-button--icon' + ("" + (type && " cui-button--icon-" + type || '')) + ("" + (buttonClassName && " " + buttonClassName || '')),
      onClick: onClick
    }, otherProps), getIcon()) : getIcon();
  };

  return Icon;
}(_react.default.PureComponent);

Icon.propTypes = {
  buttonClassName: _propTypes.default.string,
  color: _propTypes.default.string,
  className: _propTypes.default.string,
  description: _propTypes.default.string,
  isAria: _propTypes.default.bool,
  name: _propTypes.default.string.isRequired,
  onClick: _propTypes.default.func,
  size: _propTypes.default.number,
  title: _propTypes.default.string,
  type: _propTypes.default.oneOf(['', 'white'])
};
Icon.defaultProps = {
  buttonClassName: '',
  color: '',
  className: '',
  description: '',
  isAria: true,
  onClick: null,
  size: null,
  title: '',
  type: ''
};
Icon.displayName = 'Icon';
var _default = Icon;
/**
*
* @category communication
* @component icon
* @section default
*
* @js
*

export default class Default extends React.PureComponent {

  render() {
    return(
      <div>
        <Icon name='accessories_16' />
        <Icon name='accessories_20' />
        <Icon name='accessories_36' />
        <Icon name='accessories_56' />
      </div>
    );
  }
}
**/

/**
*
* @category communication
* @component icon
* @section color
*
* @js
*

export default class Default extends React.PureComponent {

  render() {
    return(
      <div>
        <Icon name='accessories_16' color='blue' />
        <Icon name='accessories_20' color='blue' />
        <Icon name='accessories_36' color='blue' />
        <Icon name='accessories_56' color='blue' />
      </div>
    );
  }
}
**/

/**
*
* @category communication
* @component icon
* @section click
*
* @js
*

export default class Default extends React.PureComponent {

  render() {
    return(
      <div>
        <Icon name='accessories_16' color='blue' ariaLabel='Accessories' onClick={() => console.log('Icon 16 - clicked')} />
        <Icon name='accessories_20' color='blue' ariaLabel='Accessories' onClick={() => console.log('Icon 20 - clicked')} />
        <Icon name='accessories_36' color='blue' ariaLabel='Accessories' onClick={() => console.log('Icon 36 - clicked')} />
        <Icon name='accessories_56' color='blue' ariaLabel='Accessories' onClick={() => console.log('Icon 56 - clicked')} />
      </div>
    );
  }
}
**/

/**
*
* @category communication
* @component icon
* @section type
*
* @js
*

export default class Default extends React.PureComponent {

  render() {
    return(
      <div>
        <div className='row'>
          <div>Default</div>
          <div style={{padding: '5px'}}>
            <Icon name='clear-active_24' ariaLabel='Clear' onClick={() => console.log('Icon 20 - clicked')} />
          </div>
        </div>
        <div className='row'>
          <div>Type(white)</div>
          <div style={{ backgroundColor: 'black', padding: '5px', width: 'fit-content'}}>
            <Icon name='clear-active_24' ariaLabel='Clear' type='white' onClick={() => console.log('Icon 36 - clicked')} />
          </div>
        </div>
      </div>
    );
  }
}
**/

exports.default = _default;