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'
import appendMap from './map'

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


function fetchDataset(payload) {
  const url = "https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/" + payload.dataset + ".json"
  return fetch(url, { mode: 'cors' }).then(r => r.json())
}

function appendApplets(applets) {
  applets.forEach(([el, payload]) => {
    switch (payload.cmd) {
      case 'citations':
      case 'load_file':
        appendTable(el, payload)
        break
      case 'map':
        el.parentNode.classList.add('wide')
        el.classList.add(payload.cmd)
        appendMap(el, payload)
        break
      default:
        appendReactApplet(el, payload)
        break
    }
  })
}

function runApplets() {
  const applets = toArray(document.querySelectorAll('.applet')).map(el => {
    console.log(el.dataset.payload)
    let payload
    try {
      payload = JSON.parse(el.dataset.payload)
    } catch (e) {
      return null
    }
    console.log(payload)
    let cmdPartz = payload.command.split(" ")
    let cmd = cmdPartz.shift()
    let dataset = null
    payload.cmd = cmd
    payload.parts = cmdPartz
    if (payload.parts.length) {
      dataset = payload.parts[0].trim()
    }
    if (!dataset) {
      const path = window.location.pathname.split('/').filter(s => !!s)
      if (path.length) {
        dataset = path[path.length - 1]
      } else {
        console.log('couldnt determine citations dataset')
        return null
      }
    }
    payload.dataset = dataset
    return [el, payload]
  }).filter(a => !!a)
  const withDataset = applets.map(a => a[1].dataset ? a[1] : null).filter(a => !!a)
  if (withDataset.length) {
    fetchDataset(withDataset[0]).then(data => {
      withDataset.forEach(dataset => dataset.data = data)
      appendApplets(applets)
    })
  } else {
    appendApplets(applets)
  }
}

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')
    }
  })
  runApplets()
}

main()