import * as React from 'react';
import { makeData, Logo, Tips } from "./Utils";

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

export class ServerTable extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: makeData()
    };
  }
  public render() {
    const { data } = this.state;
    const filterExact = (filter: any, row: any) =>
      String(row[filter.id]) === filter.value;
    const filterPart = (filter: any, row: any) =>
      row[filter.id].startsWith(filter.value) ||
      row[filter.id].endsWith(filter.value)
    return (
      <div>
        <ReactTable
          data={data}
          filterable={true}
          defaultFilterMethod={filterExact}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName",
                  filterMethod:filterPart
                },
                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: (d: any) => d.lastName
                }
              ]
            },
            {
              Header: "Info",
              columns: [{
                Header: 'Profile Progress',
                accessor: 'progress',
                Cell: (row: any) => (
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      backgroundColor: '#dadada',
                      borderRadius: '2px'
                    }}
                  >
                    <div
                      style={{
                        width: `${row.value}%`,
                        height: '100%',
                        backgroundColor: row.value > 66 ? '#85cc00'
                          : row.value > 33 ? '#ffbf00'
                            : '#ff2e00',
                        borderRadius: '2px',
                        transition: 'all .2s ease-out'
                      }}
                    />
                  </div>
                )
              },
              {
                Header: "Age",
                accessor: "age"
              },
              {
                Header: "Status",
                accessor: "status"
              }
              ]
            },
            {
              Header: 'Stats',
              columns: [
                {
                  Header: "Visits",
                  accessor: "visits"
                }
              ]
            }
          ]}
          defaultPageSize={20}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}