import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.object.assign";
import "core-js/modules/es6.regexp.replace";
import "core-js/modules/es6.string.ends-with";
import "core-js/modules/es6.string.starts-with";
import "core-js/modules/es7.symbol.async-iterator";
import "core-js/modules/es6.symbol";
import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.regexp.split";
import "core-js/modules/es6.number.constructor";
import "core-js/modules/es6.function.name";

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 _objectWithoutPropertiesLoose(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]; } return target; }

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

/**
 * @category styles
 * @component icon
 * @variations collab-ui-react
 */
import React from 'react';
import PropTypes from 'prop-types';
import { chain, find, trimEnd, uniqueId } from 'lodash';
import iconPaths from '@collab-ui/icons/data/iconsData.json';
import colors from '@collab-ui/core/data/colors.json';
import { Button } from "./..";

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,
        ariaLabel = _this$props.ariaLabel,
        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 = _objectWithoutPropertiesLoose(_this$props, ["ariaLabel", "buttonClassName", "color", "className", "description", "isAria", "onClick", "name", "size", "title", "type"]);

    var iconCount = 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 'isAria-warn':
          // TODO(pajeter): remove isAria code with next major release
          console.warn("[@collab-ui/react] Icon: isAria prop is deprecated and will be removed. Title, description or ariaLabel props should be used to add accessibility.");
          break;

        case 'color-warn':
          console.warn("[@collab-ui/react] Icon: " + data + " may not exist in the design system," + " please use a color name from http://core.collab-ui.com/styles/colors");
          break;

        case 'color-error':
          console.warn("[@collab-ui/react] Icon: " + data + " does not exist in the design system," + " please use a color name from http://core.collab-ui.com/styles/colors");
          break;

        case 'name-error':
          console.warn("[@collab-ui/react] Icon: Icon " + data + " does not exist in the design system." + " Visit http://icons.collab-ui.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, _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 = find(c.variations, ['variable', colorName]);
        if (variation) return getColorSpec(variation);
      }

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

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

    var formatColor = function formatColor() {
      return color.startsWith('$') ? color : color.endsWith('-base') ? 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-') ? name.replace(/^(icon-)/, '') : name;
      return iconPaths[iconName] ? iconPaths[iconName].map(function (icoPath, index) {
        return React.createElement("path", {
          d: icoPath,
          key: index
        });
      }) : consoleHandler('name-error', iconName);
    };

    var getAriaLabelledBy = function getAriaLabelledBy() {
      if (!isAria) return deprecationWarning(); // TODO(pajeter): remove isAria code with next major release

      if (!ariaLabel) {
        if (title && description) return titleId + " " + descId;
        if (title) return "" + titleId;
        if (description) return "" + descId;
      }

      return null;
    };

    var getAriaLabel = function getAriaLabel() {
      return isAria // TODO(pajeter): remove isAria code with next major release
      && ariaLabel ? ariaLabel : null;
    };

    var deprecationWarning = function deprecationWarning() {
      // TODO(pajeter): remove isAria code with next major release
      consoleHandler('isAria-warn');
    };

    var getIcon = function getIcon() {
      return React.createElement("svg", _extends({
        className: "cui-icon" + ("" + (className && " " + className || '')),
        name: name,
        width: getSize(),
        height: getSize(),
        "aria-labelledby": !onClick ? getAriaLabelledBy() : null,
        "aria-label": !onClick ? getAriaLabel() : null
      }, !onClick && Object.assign({}, otherProps)), isAria // TODO(pajeter): remove isAria code with next major release
      && title && React.createElement("title", {
        id: titleId
      }, title), isAria // TODO(pajeter): remove isAria code with next major release
      && description && React.createElement("desc", {
        id: descId
      }, description), React.createElement("g", {
        fill: getColor(),
        fillRule: "evenodd"
      }, getPaths()));
    };

    return onClick ? React.createElement(Button, _extends({
      className: 'cui-button--icon' + ("" + (type && " cui-button--icon-" + type || '')) + ("" + (buttonClassName && " " + buttonClassName || '')),
      ariaLabel: getAriaLabel(),
      ariaLabelledBy: isAria // TODO(pajeter): remove isAria code with next major release
      ? getAriaLabelledBy() : deprecationWarning() // TODO(pajeter): remove isAria code with next major release
      ,
      onClick: onClick
    }, otherProps), getIcon()) : getIcon();
  };

  return Icon;
}(React.PureComponent);

Icon.propTypes = {
  /** @prop Text to display for blindness accessibility features | null */
  ariaLabel: PropTypes.string,

  /** @prop Optional Button class name string | '' */
  buttonClassName: PropTypes.string,

  /** @prop Optional color css styling | '' */
  color: PropTypes.string,

  /** @prop Optional class name string | '' */
  className: PropTypes.string,

  /** @prop Icon description text | '' */
  description: PropTypes.string,

  /** @prop Depreciated prop that supports accessibility features | true */
  isAria: PropTypes.bool,
  // TODO(pajeter): remove isAria code with next major release

  /** @prop Required Icon name */
  name: PropTypes.string.isRequired,

  /** @prop Handler invoked by click of the user | null */
  onClick: PropTypes.func,

  /** @prop Sets Icon size | null */
  size: PropTypes.number,

  /** @prop Sets Icon Title prop | '' */
  title: PropTypes.string,

  /** @prop Sets Icon Type | '' */
  type: PropTypes.oneOf(['', 'white'])
};
Icon.defaultProps = {
  ariaLabel: null,
  buttonClassName: '',
  color: '',
  className: '',
  description: '',
  isAria: true,
  // TODO(pajeter): remove isAria code with next major release
  onClick: null,
  size: null,
  title: '',
  type: ''
};
Icon.displayName = 'Icon';
export default Icon;
/**
*
* @category communication
* @component icon
* @section default
*
* @js
*
import { Icon } from '@collab-ui/react';

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
*
import { Icon } from '@collab-ui/react';

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
*
import { Icon } from '@collab-ui/react';

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
*
import { Icon } from '@collab-ui/react';

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>
    );
  }
}
**/