import './styles/main.scss'
import { $, $$ } from 'dollr'
import dragula from 'dragula'

import { h, render } from 'preact'
import ResultList from './components/ResultList'

import store from './store'
import { receiveResults } from './actions/results'

const result = $('pre')
const containers = $$('.location')

const drake = dragula(containers, {
  revertOnSpill: true,
  ignoreInputTextSelection: false,
})

drake.on('drop', (el, target, source) => {
  drake.cancel()

  if (target !== source) {
    fetch('/api/trip', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
        accepts: 'application/json',
      },
      body: JSON.stringify({
        from: source.dataset.location,
        to: target.dataset.location,
      }),
    })
      .then((res) => {
        return res.json()
      })
      .then((json) => {
        store.dispatch(receiveResults(json))
      })
      .catch((err) => {
        console.error(err)
      })
  }
})

function prevent(e) {
  e.preventDefault()
}

drake.on('over', (el, target, source) => {
  if (target !== source) {
    target.classList.add('over')
  }
})

drake.on('out', (el, target, source) => {
  if (target !== source) {
    target.classList.remove('over')
  }
})

render(<ResultList />, $('#results'))