import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'
import 'waypoints/lib/noframework.waypoints.min.js'

import { toArray } from './util'
import Applet from './applet'
import { store } from './store'
import appendMap from './map'
import { ModalImage } from './modalImage'

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

function appendModalImage() {
  const el = document.createElement('div')
  document.body.appendChild(el)
  ReactDOM.render(<ModalImage />, el)
}

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

function appendApplets(applets) {
  applets.forEach(([el, payload]) => {
    el.parentNode.classList.add(payload.cmd)
    switch (payload.cmd) {
      case 'citations':
      case 'load_file':
        el.parentNode.classList.add('wide')
        appendReactApplet(el, payload)
        el.classList.add('loaded')
        break
      case 'map':
        el.parentNode.classList.add('wide')
        appendMap(el, payload)
        el.classList.add('loaded')
        break
      default:
        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 = payload.dataset || null
    let url = null
    let opt = null
    payload.cmd = cmd
    payload.partz = cmdPartz
    const fields = {}
    if (payload.fields) {
      payload.fields.forEach(field => {
        const [k, v] = field.split(': ')
        fields[k] = v
      })
    }
    payload.fields = fields

    if (payload.cmd === 'load_file' || payload.cmd === 'single_pie_chart') {
      payload.url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + cmdPartz.shift()
      return [el, payload]
    }

    if (payload.partz.length) {
      opt = payload.partz.shift().trim()
      if (opt.indexOf('http') === 0) {
        dataset = null
        url = opt
      } else if (opt.indexOf('assets') === 0) {
        dataset = null
        // console.log(url)
      } else {
        dataset = opt
        url = null
      }
    }
    if ((('datasets' in payload) && !dataset && !url) || window.location.pathname.match('datasets')) {
      const path = window.location.pathname.split('/').filter(s => !!s)
      if (path.length > 1) {
        dataset = path.pop()
        if (dataset === 'index.html') {
          dataset = path.pop()
        }
        // console.log('dataset from path:', dataset)
      } else {
        // console.log('not on a dataset page')
        return [el, payload]
      }
    }
    payload.dataset = dataset
    payload.url = url
    // console.log(payload)
    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 buildWaypoints() {
  const element = document.querySelector('.content section:nth-child(2)')
  if (!element) return null
  let waypoint = new Waypoint({
    element,
    handler: direction => {
      if (direction === 'down') {
        document.body.classList.add('scrolled')
      } else {
        document.body.classList.remove('scrolled')
      }
      // console.log(direction)
      // console.log('Scrolled to waypoint!')
    }
  })
  return waypoint
}

function main() {
  // const paras = document.querySelectorAll('section p')
  // if (paras.length) {
  //   paras[0].classList.add('first_paragraph')
  // }
  let active = ''
  const { href } = window.location
  if (href.match('news')) {
    active = 'news'
  } else if (href.match('about')) {
    active = 'about'
  } else if (href.match('datasets')) {
    active = 'datasets'
  } else if (href.match('research')) {
    active = 'research'
  } else {
    active = href
  }
  toArray(document.querySelectorAll('header .links a')).some(tag => {
    if (tag.href.match(active)) {
      tag.classList.add('active')
      return true
    }
    return false
  })
  runApplets()
  buildWaypoints()
  appendModalImage()
}

main()