import React, { Component, PropTypes } from 'react';
import { injectIntl, intlShape } from 'react-intl';

// Import React Table
import ReactTable from 'react-table';
import 'react-table/react-table.css';

// MatchSorter
import matchSorter from 'match-sorter';


const makeDefaultState = () => ({
  sorted: [],
  page: 0,
  pageSize: 10,
  expanded: {},
  resized: [],
  filtered: []
});

export class TherapistDataTable extends Component {
  render() {
    return (
      <div>
        <ReactTable
          // manual // Forces table not to paginate or sort automatically, so we can handle it server-side
          data={this.props.therapists}
          filterable
          // defaultPageSize={20}
          style={{
            height: '500px' // This will force the table body to overflow and scroll, since there is not enough room
          }}
          className="-striped -highlight"
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          sorted={this.props.sorted}
          page={this.props.page}
          pageSize={this.props.pageSize}
          expanded={this.props.expanded}
          resized={this.props.resized}
          filtered={this.props.filtered}
          // Callbacks
          onSortedChange={sorted => this.setState({ sorted })}
          onPageChange={page => this.setState({ page })}
          onPageSizeChange={(pageSize, page) =>
            this.setState({ page, pageSize })}
          onExpandedChange={expanded => this.setState({ expanded })}
          onResizedChange={resized => this.setState({ resized })}
          onFilteredChange={filtered => this.setState({ filtered })}
          columns={[
            {
              Header: 'Name',
              accessor: 'WAVES_NAME',
              filterMethod: (filter, rows) =>
                matchSorter(rows, filter.value, { keys: ['WAVES_NAME'] }),
              filterAll: true
            },
            {
              Header: 'Phone',
              accessor: 'PHONE',
            },
            {
              Header: 'Phone Alt',
              accessor: 'PHONE_2'
            },
            {
              Header: 'Gender',
              accessor: 'GENDER'
            }
          ]}
        />
      </div>
    );
  }
}

TherapistDataTable.propTypes = {
  sorted: PropTypes.arrayOf(),
  page: PropTypes.number,
  pageSize: PropTypes.number,
  expanded: PropTypes.object,
  resized: PropTypes.arrayOf(),
  filtered: PropTypes.arrayOf(),
  therapists: PropTypes.arrayOf(PropTypes.shape({
    WAVES_NAME: PropTypes.string.isRequired,
  })).isRequired,
  // intl: intlShape.isRequired,
};

export default TherapistDataTable;
