import React from 'react';
import AntdTag from 'antd/es/tag';
import classnames from 'classnames';

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

class Tag extends React.Component {
  static defaultProps = {
    bordered: false,
  };

  renderTag = ({ getPrefixCls }) => {
    const {
      prefixCls: customizePrefixCls,
      bordered,
      className,
      icon,
      size,
      children,
      ...restProps
    } = this.props;
    const prefixCls = getPrefixCls('tag', customizePrefixCls);
    const isSmall = size === 'small';
    const cls = classnames(className, {
      [`${prefixCls}-small`]: isSmall,
      [`${prefixCls}-bordered`]: bordered,
      [`${prefixCls}-has-icon`]: !!icon && !isSmall,
    });
    return (
      <AntdTag
        prefixCls={prefixCls}
        className={cls}
        icon={isSmall ? null : icon}
        {...restProps}
      >
        {isSmall ? (
          <span className={`${prefixCls}-small-content`}>{children}</span>
        ) : (
          children
        )}
      </AntdTag>
    );
  };

  render() {
    return <ConfigConsumer>{this.renderTag}</ConfigConsumer>;
  }
}

export default Tag;