import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'

// import App from './app'

import { store } from './store'

// const container = document.createElement('div')
// document.body.appendChild(container)

toArray(document.querySelectorAll('.applet')).forEach(el => {
  try {
    const payload = JSON.parse(el.dataSet.getItem('payload'))
  } catch(e) {
    return
  }
  switch (payload.command) {
    case 'load file':
      append_tabulator(el, payload)
      break
    default:
      append_react_applet(el, payload)
      break
  }
})

function append_react_applet(el, payload) {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <App command={payload} />
      </Provider>
    </AppContainer>, el
  )
}
function append_tabulator(el, payload) {
  const table = new Tabulator(el, {
    height:"311px",
    layout:"fitColumns",
    placeholder:"No Data Set",
    columns:[
      // {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"},
    ],
  })
  const columns = payload.fields.split(', ')
  console.log(columns)
  if ()
  table.setData(path)
}