import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import icBEM from './utils/icBEM';
import prefixClass from './utils/prefixClass';

import './styles/_animations.scss';
import './styles/Icon.scss';

import SvgMap from './icons/components';

const COMPONENT_NAME = prefixClass('icon');
const ROOT_BEM = icBEM(COMPONENT_NAME);

const GRAY = 'gray';
const BLUE = 'blue';
const RED = 'red';

const COLORS = {
  blue: '#45b0e6',
  red: '#d94e41',
  gray: 'rgba(0, 0, 0, 0.7)',
};

const DEFAULT_FILL = 'currentColor';

function getSvgFill({ colorType, wrapperProps }) {
  if (colorType) {
    return COLORS[colorType];
  }
  /**
     * This is for backward compatibility.
     * Because in old gypcrete, we didn't use svg but icon font for <Icon>.
     * So the icon color depends on wrapper <span> color style.
     * Though we change <Icon> implementaion to inline-svg, we should not break this behavior.
     * So just take the color from it and set this to `fill` of svg.
     */
  const customColor = wrapperProps && wrapperProps.style && wrapperProps.style.color;
  if (customColor) {
    return customColor;
  }
  return null;
}

function Icon({
  type,
  color,
  large,
  spinning,
  className,
  svgProps,
  ...otherProps
}) {
  let bemClass = ROOT_BEM
    .modifier('large', large)
    .modifier('spin', spinning);

  if (color) {
    bemClass = bemClass.modifier(color);
  }

  const rootClassName = classNames(
    className,
    bemClass.toString(),
    /**
         * For backward compatibility.
         * For inline-svg implementaion we don't need this class name.
         * But we had used this with icon font implementation.
         */
    `gyp-icon-${type}`
  );

  const SvgComponent = SvgMap[type];

  const fill = getSvgFill({
    colorType: color,
    wrapperProps: otherProps,
  });

  return (
    <span
      className={rootClassName}
      role="presentation"
      {...otherProps}
    >
      {SvgComponent && (
        <SvgComponent fill={fill || DEFAULT_FILL} {...svgProps} />
      )}
    </span>
  );
}

Icon.propTypes = {
  type: PropTypes.string.isRequired,
  color: PropTypes.oneOf([GRAY, BLUE, RED]),
  large: PropTypes.bool,
  spinning: PropTypes.bool,
  svgProps: PropTypes.objectOf(PropTypes.any),
};

Icon.defaultProps = {
  color: undefined,
  large: false,
  spinning: false,
  svgProps: {},
};

export default Icon;

@@ -435,751 +435,31 @@
 d';%0A
-%0A
 const 
-COLORS = %7B%0A  blue: '#45b0e6',%0A  red: '#d94e41',%0A  gray: 'rgba(0, 0, 0, 0.7)',%0A%7D;%0A%0Aconst DEFAULT_FILL = 'currentColor';%0A%0Afunction getSvgFill(%7B colorType, wrapperProps %7D) %7B%0A  if (colorType) %7B%0A    return COLORS%5BcolorType%5D;%0A  %7D%0A  /**%0A     * This is for backward compatibility.%0A     * Because in old gypcrete, we didn't use svg but icon font for %3CIcon%3E.%0A     * So the icon color depends on wrapper %3Cspan%3E color style.%0A     * Though we change %3CIcon%3E implementaion to inline-svg, we should not break this behavior.%0A     * So just take the color from it and set this to %60fill%60 of svg.%0A     */%0A  const customColor = wrapperProps && wrapperProps.style && wrapperProps.style.color;%0A  if (customColor) %7B%0A    return customColor;%0A  %7D%0A  return null;%0A%7D
+GREEN = 'green';%0A
 %0A%0Afu
@@ -1047,95 +1047,8 @@
 %5D;%0A%0A
-  const fill = getSvgFill(%7B%0A    colorType: color,%0A    wrapperProps: otherProps,%0A  %7D);%0A%0A
   re
@@ -1206,30 +1206,22 @@
 ill=
-%7Bfill %7C%7C DEFAULT_FILL%7D
+%22currentColor%22
  %7B..
@@ -1360,16 +1360,23 @@
 LUE, RED
+, GREEN
 %5D),%0A  la

Simplify <Icon> to inherit icon color on svg