import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Table as NextTable } from '@alifd/next';
import { TableProps as NextTableProps } from '@alifd/next/types/table';
import { omitProps } from '../utils/object';

interface TableProps extends Omit<NextTableProps, 'size'> {
  size?: 'large' | 'medium' | 'small' | 'xs',
}
class Table extends Component<TableProps> {
  // static Item = NextTab.Item;
  static Column = NextTable.Column;
  static ColumnGroup = NextTable.ColumnGroup;
  static GroupHeader = NextTable.GroupHeader;
  static GroupFooter = NextTable.GroupFooter;
  static StickyLock = NextTable.StickyLock;

  render() {
    const { prefix = 'next-', className, size, ...otherProps } = this.props;
    const { hasBorder = false, rowSelection } = this.props;
    let newcolumnProps;
    let newRowSelection;
    if (!hasBorder && rowSelection) { // 修改checkbox间距
      const { columnProps } = rowSelection;
      let newWidth = 30;

      if (columnProps) {
        const date = columnProps();
        const { width = 30 } = date;
        newWidth = width;
        date.width = newWidth;
        newcolumnProps = () => {
          return (date);
        };
      } else {
        newcolumnProps = () => {
          return (
            { width: newWidth }
          );
        };
      }
      newRowSelection = rowSelection;
      newRowSelection.columnProps = newcolumnProps;
    }
    if (size === 'xs' || size === 'large') {
      if (!hasBorder && rowSelection) {
        return (
          <NextTable
            prefix={prefix}
            {...omitProps(otherProps, [ 'size' ])}
            rowSelection={newRowSelection}
            hasBorder={hasBorder}
            className={cls(
              className, {
                [`${prefix}xs`]: size === 'xs',
                [`${prefix}large`]: size === 'large',
              },
            )}
          />
        );
      }
      return (
        <NextTable
          {...omitProps(otherProps, [ 'size' ])}
          prefix={prefix}
          hasBorder={hasBorder}
          className={cls(
            className, {
              [`${prefix}xs`]: size === 'xs',
              [`${prefix}large`]: size === 'large',
            },
          )}
        />
      );
    }
    if (!hasBorder && rowSelection) { // 修改checkbox间距
      return (
        <NextTable
          {...otherProps}
          prefix={prefix}
          size={size}
          rowSelection={newRowSelection}
          className={cls(
            className, {
            },
          )}
        />
      );

    }
    return (
      <NextTable
        {...otherProps}
        hasBorder={hasBorder}
        prefix={prefix}
        size={size}
        className={cls(
          className, {
          },
        )}
      />
    );

  }
}

hoistNonReactStatics(Table, NextTable);

export default ConfigProvider.config(Table);