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,
  // accepts(el, target, source, sibling) {
  //   // console.log('accepts');
  //   // console.log(target);
  //   return 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) => {
      console.log(json);
      // result.textContent = JSON.stringify(json, null, '  ')
      store.dispatch(receiveResults(json));
    }).catch((err) => {
      console.log('error');
      console.log(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')
);