import * as React from 'react';
import classNames from 'classnames';
import ReactIcon from './IconBase';
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
import { normalizeTwoToneColors } from './utils';
// Initial setting
// should move it to antd main repo?
setTwoToneColor('#1890ff'); // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720

const Icon = React.forwardRef((props, ref) => {
  const {
    // affect outter <i>...</i>
    className,
    // affect inner <svg>...</svg>
    icon,
    spin,
    rotate,
    tabIndex,
    onClick,
    // other
    twoToneColor,
    ...restProps
  } = props;
  const classString = classNames('anticon', {
    [`anticon-${icon.name}`]: Boolean(icon.name)
  }, {
    'anticon-spin': !!spin || icon.name === 'loading'
  }, className);
  let iconTabIndex = tabIndex;

  if (iconTabIndex === undefined && onClick) {
    iconTabIndex = -1;
  }

  const svgStyle = rotate ? {
    msTransform: `rotate(${rotate}deg)`,
    transform: `rotate(${rotate}deg)`
  } : undefined;
  const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
  return <span role="img" aria-label={icon.name} {...restProps} ref={ref} tabIndex={iconTabIndex} onClick={onClick} className={classString}>
                <ReactIcon icon={icon} primaryColor={primaryColor} secondaryColor={secondaryColor} style={svgStyle} />
            </span>;
});
Icon.displayName = 'AntdIcon';
Icon.getTwoToneColor = getTwoToneColor;
Icon.setTwoToneColor = setTwoToneColor;
export default Icon;