import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactTabulator } from 'react-tabulator'

import { toArray, toTuples, domainFromUrl } from '../util'
import { Loader } from '../common'

import csv from 'parse-csv'

class FileTable extends Component {
  state = {
    keys: [],
    data: [],
    columns: [],
  }
  
  componentDidMount() {
    const { payload } = this.props
    console.log(payload.url)
    fetch(payload.url, { mode: 'cors' })
      .then(r => r.text())
      .then(text => {
        try {
          const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/\"/,''))
          const data = csv.toJSON(text, { headers: { included: true } })
          // console.log(data)
          const columns = this.getColumns(keys, data, payload.fields)
          this.setState({ keys, data, columns })
        } catch (e) {
          console.error("error making json:", payload.url)
          console.error(e)
        }
      })
  }

  getColumns(keys, data, fields) {
    let titles = fields.length ? fields[0].split(', ') : keys
    let numberFields = []
    let columns = keys.map((field, i) => {
      const title = titles[i] || field
      if (field.match('url')) {
        let textField = field.replace('url', 'label')
        data.forEach(el => el[textField] = domainFromUrl(el[field]))
        return {
          title,
          field: textField,
          formatter: 'link',
          formatterParams: { target: "_blank", urlField: field, },
          sorter: 'string'
        }
      }
      switch (field) {
        case 'images':
        case 'year':
          return { title, field: field.toLowerCase(), sorter: 'number' }
        default:
          return { title, field: field.toLowerCase(), sorter: 'string' }
      }
    })
    return columns
  }

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