import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { Tab as NextTab } from '@alifd/next';
import { TabProps as NextTabProps } from '@alifd/next/types/tab';
import { getTheme } from '../utils/getTheme';
import { omitProps } from '../utils/object';


interface TabProps extends Omit<NextTabProps, 'size' | 'shape'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small',
  shape?: 'pure' | 'wrapped' | 'text'
}
class Tab extends Component<TabProps> {
  static Item = NextTab.Item;

  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {
    const { prefix = 'next-', className, shape = 'pure', size, ...otherProps } = this.props;

    const theme = getTheme(this.context, this.props);

    if (shape === 'pure' || shape === 'text') {
      if (size === 'large') {
        return (
          <NextTab
            {...omitProps(otherProps, [ 'size' ])}
            shape={shape}
            className={cls(
              className, {
                [`${prefix}large`]: size === 'large',
                [`${prefix}white`]: theme === 'white',
                [`${prefix}grey`]: theme === 'grey',
              },
            )}
          />
        );
      }
      return (
        <NextTab
          {...otherProps}
          shape={shape}
          size='small'
          className={cls(
            className, {
              [`${prefix}white`]: theme === 'white',
              [`${prefix}grey`]: theme === 'grey',
            },
          )}
        />
      );
    }
    if (shape === 'wrapped') {
      const { prefix = 'next-', className, ...otherProps } = this.props;
      if (size === 'large') {
        return (
          <NextTab
            {...omitProps(otherProps, [ 'size' ])}
            className={cls(
              className, {
                [`${prefix}large`]: size === 'large',
                [`${prefix}white`]: theme === 'white',
                [`${prefix}grey`]: theme === 'grey',
              },
            )}
          />
        );
      }
      return (
        <NextTab
          {...otherProps}
          size='medium'
          className={cls(
            className, {
              [`${prefix}white`]: theme === 'white',
              [`${prefix}grey`]: theme === 'grey',
            },
          )}
        />
      );


    }

    return (
      <NextTab
        {...otherProps}
        className={cls(
          className, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          },
        )}
      />
    );

  }
}
export default ConfigProvider.config(Tab);