import React from 'react';
import AntdButton from 'antd/es/button';
import classnames from 'classnames';

import { ConfigConsumer } from '../config-provider';
import Icons from '../icons';
import './index.less';

const { LoadingIcon } = Icons;
const LoadingBtn = <LoadingIcon fill="currentColor" />;
const Button = props => {
  const {
    size = '',
    className = '',
    loading,
    prefixCls: customizePrefixCls,
    children,
    ...restProps
  } = props;
  const mChildren =
    typeof children === 'string' && children.length === 2
      ? ` ${children} `
      : children;
  return (
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const prefixCls = getPrefixCls('btn', customizePrefixCls);
        let cls = className;
        if (loading) {
          cls = classnames(className, `${prefixCls}-loading`);
          return (
            <AntdButton
              children={mChildren}
              {...restProps}
              prefixCls={prefixCls}
              className={cls}
              icon={LoadingBtn}
            />
          );
        }
        return (
          <AntdButton
            children={mChildren}
            {...restProps}
            size={size}
            prefixCls={prefixCls}
            className={cls}
          />
        );
      }}
    </ConfigConsumer>
  );
};

Button.__ANT_BUTTON = true;

export default Button;