import React from 'react';
import Icons from '../icons';
import RcInputNumber from 'rc-input-number';
import { ConfigConsumer } from '../config-provider';
import classnames from 'classnames';
import 'rc-input-number/assets/index.css';
import './index.less';

const { PlusIcon, MinusIcon } = Icons;

const InputNumber = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const {
        prefixCls: customizePrefixCls,
        suffix,
        size,
        width,
        ...restProps
      } = props;
      const prefixCls = getPrefixCls('inputNumber', customizePrefixCls);
      return (
        <div
          className={classnames(prefixCls, `${prefixCls}-${size}`)}
          style={width ? { width: width } : null}
        >
          <RcInputNumber
            downHandler={<MinusIcon style={{ fontSize: 16 }} />}
            upHandler={<PlusIcon style={{ fontSize: 16 }} />}
            {...restProps}
          />
          {suffix && <span className={`${prefixCls}-suffix`}>{suffix}</span>}
        </div>
      );
    }}
  </ConfigConsumer>
);

export default InputNumber;