import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'
import Tabulator from 'tabulator-tables'
import csv from 'parse-csv'
// import parse from 'csv-parse'

import { toArray } from './util'
import Applet from './applet'
import { store } from './store'

function appendReactApplet(el, payload) {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Applet command={payload} />
      </Provider>
    </AppContainer>, el
  )
}

function appendTabulator(el, payload) {
  const table = new Tabulator(el, {
    height: '311px',
    layout: 'fitDataFill',
    placeholder: 'No Data Set',
    columns: payload.fields.split(', ').map(field => {
      switch (field) {
        default:
          return { title: field, field: field.toLowerCase(), sorter: 'string' }
      }
    }),
    // {title:'Name', field:'name', sorter:'string', width:200},
    // {title:'Progress', field:'progress', sorter:'number', formatter:'progress'},
    // {title:'Gender', field:'gender', sorter:"string"},
    // {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
    // {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
    // {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    // {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
  })
  let path = payload.opt
  // let columns = payload.fields.split(',').map(s => s.trim())
  // console.log(path, columns)
  fetch('https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_names_gender_kg_min.csv', { mode: 'cors' })
    .then(r => r.text())
    .then(text => {
      const data = csv.toJSON(text, { headers: { included: true } })
      console.log(data)
      table.setData(data)
      // const parser = parse()
      // console.log(parser)
      // parser.on('readable', () => {
      //   let record
      //   let output = []
      //   do {
      //     record = parser.read()
      //     if (record) output.push(record)
      //   } while (record)
      //   output.shift()
      //   table.setData(output)
      // })
      // parser.on('error', err => {
      //   console.error(err.message)
      // })
      // parser.write(data)
      // parser.end()
      // table.setData(path, null, xs{ method: 'get', mode: 'cors', cache: 'no-cache' })
    })
}

function appendApplets() {
  toArray(document.querySelectorAll('.applet')).forEach(el => {
    console.log(el.dataset.payload)
    let payload;
    try {
      payload = JSON.parse(el.dataset.payload)
    } catch (e) {
      return
    }
    console.log(payload)
    switch (payload.command) {
      case 'load file':
        appendTabulator(el, payload)
        break
      default:
        appendReactApplet(el, payload)
        break
    }
  })
}

function main() {
  const paras = document.querySelectorAll('section p')
  if (paras.length) {
    paras[0].classList.add('first_paragraph')
  }
  toArray(document.querySelectorAll('header .links a')).forEach(tag => {
    if (window.location.href.match(tag.href)) {
      tag.classList.add('active')
    }
  })
  appendApplets()
}

main()