import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { b as classNames, a as withNano } from '../../chunk-566df01b.js';
import { a as theme } from '../../chunk-aeb80e51.js';
import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../../chunk-aad905a2.js';

var styles = (function (theme$$1) {
  var icons = theme$$1.icons;

  var customSize = function customSize(_ref) {
    var size = _ref.size;

    if (size === 'sm') return icons.size.sm;
    if (size === 'md') return icons.size.md;
    if (size === 'lg') return icons.size.lg;
    if (typeof size === 'number') return size;
    return icons.size.default;
  };

  return {
    root: {
      objectFit: 'contain',
      height: icons.size.default,
      width: icons.size.default,
      fill: theme$$1.palette.black,
      outline: 'none'
    },
    customSize: {
      height: customSize,
      width: customSize
    },
    customColor: {
      fill: function fill(_ref2) {
        var color = _ref2.color;
        return theme$$1.palette[color] || color;
      }
    },
    clickable: {
      '&:hover': {
        cursor: 'pointer'
      }
    },
    hoverColor: {
      '&:hover': {
        fill: function fill(_ref3) {
          var hoverColor = _ref3.hoverColor;
          return theme$$1.palette[hoverColor] || hoverColor;
        }
      }
    }
  };
});

var Icon = function Icon(_ref) {
  var color = _ref.color,
      disabledColor = _ref.disabledColor,
      activeColor = _ref.activeColor,
      hoverColor = _ref.hoverColor,
      children = _ref.children,
      className = _ref.className,
      classes = _ref.classes,
      size = _ref.size,
      width = _ref.width,
      height = _ref.height,
      viewBox = _ref.viewBox,
      _onClick = _ref.onClick,
      disabled = _ref.disabled,
      props = objectWithoutProperties(_ref, ['color', 'disabledColor', 'activeColor', 'hoverColor', 'children', 'className', 'classes', 'size', 'width', 'height', 'viewBox', 'onClick', 'disabled']);

  var _useState = useState(color),
      _useState2 = slicedToArray(_useState, 2),
      currentColor = _useState2[0],
      setColor = _useState2[1];

  var clickable = !!_onClick;
  useEffect(function () {
    if (disabled) {
      setColor(disabledColor);
      return;
    }
    setColor(color);
  }, [color, disabled, disabledColor]);
  return React.createElement(
    'svg',
    _extends({
      className: classNames(className, classes.root, size && classes.customSize,
      // color && classes.customColor,
      clickable && hoverColor && classes.hoverColor, clickable && classes.clickable),
      onClick: function onClick(e) {
        return !disabled && _onClick && _onClick(e);
      },
      onMouseEnter: function onMouseEnter() {
        return !disabled && clickable && setColor(hoverColor);
      },
      onMouseLeave: function onMouseLeave() {
        return !disabled && clickable && setColor(color);
      },
      width: width,
      height: height,
      viewBox: viewBox
    }, props),
    typeof children === 'function' ? children(typeof currentColor === 'string' ? { primary: theme.palette[currentColor] || currentColor } : currentColor) : children
  );
};

var colorPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
  primary: PropTypes.string,
  secondary: PropTypes.string,
  border: PropTypes.string,
  background: PropTypes.string
})]);

Icon.propTypes = {
  color: colorPropType,
  disabledColor: colorPropType,
  activeColor: colorPropType,
  hoverColor: colorPropType,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node), PropTypes.func]),
  className: PropTypes.string,
  classes: PropTypes.object,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  // size can be "lg/md/sm" or number {12}
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  viewBox: PropTypes.string
};

Icon.defaultProps = {
  color: theme.palette.grey90,
  hoverColor: theme.palette.black,
  disabled: false,
  width: 24,
  height: 24,
  viewBox: '0 0 24 24'
};

var Icon$1 = withNano(styles, {
  observableProps: ['size', 'color', 'hoverColor']
})(Icon);

export default Icon$1;
//# sourceMappingURL=index.js.map
