import React from 'react';
import ScrollableInkTabBar from 'rc-tabs/es/ScrollableInkTabBar';
import classnames from 'classnames';

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

const { RightIcon, LeftIcon, UpIcon, DownIcon } = Icons;

class TabBar extends React.Component {
  static defaultProps = {
    animated: true,
    type: 'line',
  };

  render() {
    return (
      <ConfigConsumer>
        {({ direction }) => {
          const {
            tabBarStyle,
            animated,
            renderTabBar,
            tabBarExtraContent,
            tabPosition,
            prefixCls,
            className,
            size,
            type,
          } = this.props;
          const inkBarAnimated =
            typeof animated === 'object' ? animated.inkBar : animated;
          // 自定义上下左右 icon
          const isVertical = tabPosition === 'left' || tabPosition === 'right';
          let prevIconComponent = isVertical ? UpIcon : LeftIcon;
          let nextIconComponent = isVertical ? DownIcon : RightIcon;
          if (direction === 'rtl' && !isVertical) {
            prevIconComponent = RightIcon;
            nextIconComponent = LeftIcon;
          }
          const prevIcon = (
            <span className={`${prefixCls}-tab-prev-icon`}>
              {React.createElement(prevIconComponent, {
                className: `${prefixCls}-tab-prev-icon-target`,
                fill: 'currentColor',
              })}
            </span>
          );
          const nextIcon = (
            <span className={`${prefixCls}-tab-next-icon`}>
              {React.createElement(nextIconComponent, {
                className: `${prefixCls}-tab-next-icon-target`,
                fill: 'currentColor',
              })}
            </span>
          );
          const cls = classnames(
            `${prefixCls}-${tabPosition}-bar`,
            {
              [`${prefixCls}-${size}-bar`]: !!size,
              [`${prefixCls}-card-bar`]: type && type.indexOf('card') >= 0,
            },
            className,
          );
          const renderProps = {
            ...this.props,
            children: null,
            inkBarAnimated,
            extraContent: tabBarExtraContent,
            style: tabBarStyle,
            prevIcon,
            nextIcon,
            className: cls,
          };
          let RenderTabBar = null;
          if (renderTabBar) {
            RenderTabBar = renderTabBar(renderProps, ScrollableInkTabBar);
          } else {
            RenderTabBar = <ScrollableInkTabBar {...renderProps} />;
          }
          return React.cloneElement(RenderTabBar);
        }}
      </ConfigConsumer>
    );
  }
}

export default TabBar;