import { $, $$ } from 'dollr';
import dragula from 'dragula';


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;

  // }
});

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, '  ')
    }).catch((err) => {
      console.log('error');
      console.log(err);
    });
  }
});

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');
  }
});