import * as React from 'react';
import { Tips } from "./Utils";
import * as _ from 'lodash';
// import { Chart } from './Chart';
const reactcsv = require('react-csv');
const CSVLink = reactcsv.CSVLink;
import * as Papa from 'papaparse';

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

export default class ServerTable extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      headers: [], data: []
    }
    const loaded = (results: any) => {
      const localstate = this;
      localstate.setState({
        headers: results.meta.fields,
        data: results.data
      });
    }
    Papa.parse(this.props.csvFile, {
      header: true,
      download: true,
      skipEmptyLines: true,
      dynamicTyping: true,
      complete: loaded
    });
  }

  public render() {
    const data = this.state.data;
    const headers = this.state.headers;
    const filterPart = (filter: any, row: any) =>
      String(row[filter.id]).startsWith(filter.value) ||
      String(row[filter.id]).endsWith(filter.value)
    const headerGen = (headerName: string) => {
      const title = headerName
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, (str: string) => str.toUpperCase());
      return {
        Header: title,
        accessor: headerName
      }
    }
    const headerCols = headers.map(headerGen);
    return (
      <ReactTable
        data={data}
        filterable={true}
        defaultFilterMethod={filterPart}
        columns={headerCols}
        showPagination={false}
        defaultPageSize={100}
        className="-striped -highlight"
        style={{
          height: "500px"
        }}
      >
        {(state, makeTable, ) => {
          const lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers));
          return (
            <div>
              {makeTable()}
              {/* <Chart data={lastFiltered} /> */}
              <CSVLink data={lastFiltered} filename={"data.csv"}>
                Download CSV
              </CSVLink>
              <br />
              <Tips />
            </div>
          )
        }}
      </ReactTable>

    );
  }

  public loaded(results: any) {
    this.setState({
      headers: results.meta.fields,
      data: results.data
    });
  }
}