import React from 'react';
import AntdTabs from 'antd/es/tabs';

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

const { PlusIcon } = Icons;

class Tabs extends React.Component {
  renderTabs = ({ getPrefixCls }) => {
    const { prefixCls: customizePrefixCls, ...restProps } = this.props;
    const prefixCls = getPrefixCls('tabs', customizePrefixCls);

    return (
      <AntdTabs
        addIcon={<PlusIcon fill="currentColor" />}
        {...restProps}
        prefixCls={prefixCls}
      />
    );
  };

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

// 直接设置closeIcon不生效，在组件外面设置是可以的，很奇怪
Tabs.TabPane = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('tabs', customizePrefixCls);
      return (
        <AntdTabs.TabPane
          {...restProps}
          closeIcon={<span>skksks</span>}
          prefixCls={prefixCls}
        />
      );
    }}
  </ConfigConsumer>
);

export default Tabs;