import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Radio, Pagination } from 'antd';
import styles from './SingleSelectTable.less';

export default class SingleSelectTable extends Component {
  static defaultProps = {
    loading: false,
    columns: [],
    dataSource: [],
    pagination: false,
  };
  static propTypes = {
    loading: PropTypes.bool,
    columns: PropTypes.array,
    dataSource: PropTypes.array,
    pagination: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.bool,
    ]),
  };
  state = {
    selectedRowKeys: null,
  };

  handleRowClick = (record) => {
    this.setState({
      selectedRowKeys: record.key,
    });
    this.props.onSingleTransfer(record);
  };
  handleRowSelectChange = (key) => {
    this.setState({
      selectedRowKeys: key,
    });
  };
  handleTableChange = (page, pageSize) => {
    this.props.onChange(page, pageSize);
  };

  render() {
    const { loading, columns, dataSource, pagination } = this.props;
    const { selectedRowKeys } = this.state;

    const rowSelection = {
      type: 'radio',
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
    };
    const onRowClick = (record) => {
      return {
        onClick: () => this.handleRowSelectChange(record.key),
      };
    };
    const renderTableFooter = (paginationProps) => {
      if (paginationProps) {
        return (
          <Pagination
            {...paginationProps}
            onChange={this.handleTableChange}
          />
        );
      } else {
        return false;
      }
    };
    return (
      <Table
        bordered
        loading={loading}
        footer={() => renderTableFooter(pagination)}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        rowKey={record => record.key}
        rowSelection={rowSelection}
        onChange={this.handleTableChange}
        onRow={onRowClick}
        className={styles.table}
        scroll={{ y: 400 }}
      />
    );
  }
}