import React, { Component } from 'react'
import { ReactTabulator } from 'react-tabulator'
import csv from 'parse-csv'

import { domainFromUrl } from '../util'
import { Loader } from '../common'

class FileTable extends Component {
  state = {
    keys: [],
    data: [],
    filteredData: [],
    columns: [],
    q: '',
  }

  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, filteredData: data, columns })
        } catch (e) {
          console.error("error making json:", payload.url)
          console.error(e)
        }
      })
  }

  getColumns(keys, data, fields) {
    let titles = fields.Headings ? fields.Headings.split(', ') : keys
    // let numberFields = []
    let columns = keys.map((field, i) => {
      const title = titles[i] || field
      let widthGrow = 1
      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'
        }
      }
      if (title === 'Embassy') {
        widthGrow = 2
      }
      switch (field) {
        case 'images':
        case 'year':
          return { title, field: field.toLowerCase(), sorter: 'number' }
        default:
          return { title, field: field.toLowerCase(), sorter: 'string', widthGrow }
      }
    })
    return columns
  }

  updateFilter(q) {
    const { keys, data } = this.state
    if (!q.length) {
      this.setState({ q, filteredData: data })
    } else {
      let qRe = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi')
      let filteredData = data.filter(row => keys.some(key => row[key].match(qRe)))
      this.setState({ q, filteredData })
    }
  }

  render() {
    const { payload } = this.props
    const { q, columns, data, filteredData } = this.state
    if (!this.state.data.length) {
      return <Loader />
    }
    const fn = payload.url.split('/').pop()
    return (
      <div className='citationBrowser'>
        <div className='citationHeader'>
          <input
            type="text"
            value={q}
            onChange={e => this.updateFilter(e.target.value)}
            className='q'
            placeholder='Enter text to search data'
          />
          <a className='download' href={payload.url} filename={fn}>Download CSV</a>
        </div>
        <ReactTabulator
          columns={columns}
          data={filteredData}
          options={{
            height: Math.min(37 * data.length + 29, 311),
            layout: 'fitColumns',
            placeholder: 'No Data Set',
          }}
        />
      </div>
    )
  }
}
export default FileTable