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 payload={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)
        el.classList.add('loaded')
        break
      default:
        console.log('react', el, payload)
        appendReactApplet(el, payload)
        el.classList.add('loaded')
        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)
      console.log(payload)
    } catch (e) {
      return null
    }
    let cmdPartz = payload.command.split(" ")
    let cmd = cmdPartz.shift()
    let dataset = null
    let url = null
    let opt = null
    payload.cmd = cmd
    payload.partz = cmdPartz
    if (payload.partz.length) {
      opt = payload.partz.shift().trim()
      if (opt.indexOf('http') === 0) {
        dataset = null
        url = opt
      } else if (opt.indexOf('assets') === 0) {
        let pathname = window.location.pathname.replace('index.html', '')
        url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + pathname + opt
        dataset = null
        // console.log(url)
      } else {
        dataset = opt
        url = null
      }
    }
    if (!dataset && !url) {
      const path = window.location.pathname.split('/').filter(s => !!s)
      if (path.length) {
        dataset = path.pop()
        if (dataset === 'index.html') {
          dataset = path.pop()
        }
        // console.log('dataset from path:', dataset)
      } else {
        console.log('couldnt determine citations dataset')
        return null
      }
    }
    payload.dataset = dataset
    payload.url = url
    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()