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

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

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

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':
        appendTable(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()