import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { toArray, toTuples } from '../util'

import { Loader } from '../common'

import csv from 'parse-csv'

class FileTable extends Component {
  state = {
    data: []
  }
  
  componentDidMount() {
    fetch(payload.url, { mode: 'cors' })
      .then(r => r.text())
      .then(text => {
        try {
          const data = csv.toJSON(text, { headers: { included: true } })
          this.setState({ data })
        } catch (e) {
          console.error("error making json:", payload.url)
          console.error(e)
        }
      })
  }

  getColumns(payload) {
    let { cmd, url, fields } = payload
    return ((fields && fields.length) ? fields[0] : '').split(', ').map(field => {
      switch (field) {
        default:
          return { title: field, field: field.toLowerCase(), sorter: 'string' }
      }
    })
  }

  render() {
    const { payload } = this.props
    const { paper, citations } = payload.data
    const columns = getColumns(payload)
    if (!this.state.data.length) {
      return <Loader />
    }
    return (
      <ReactTabulator
        columns={citationsColumns}
        data={this.state.data}
        options={{
          height: 311,
          layout: 'fitColumns',
          placeholder: 'No Data Set',
        }}
      />
    )
  }
}
export default FileTable