const flyd = require('flyd');
const takeUntil = require('flyd/module/takeuntil');

function $(sel) {
  return document.querySelector(sel);
}

document.addEventListener('DOMContentLoaded', () => {
  const dragElm = $('#drag');

  const mouseDown = flyd.stream();
  const mouseMove = flyd.stream();
  const mouseUp = flyd.stream();

  dragElm.addEventListener('mousedown', mouseDown);
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);

  const mouseDrag = flyd.chain(md => {
    const startX = md.offsetX;
    const startY = md.offsetY;

    console.log('Got mouse down!');
    console.log('Initial element position:', { startX, startY });

    return takeUntil(flyd.map(mm => {
      console.log('Got mouse move!');
      console.log('Current mouse position:', {
        x: mm.clientX,
        y: mm.clientY,
      });

      return {
        left: mm.clientX - startX,
        top: mm.clientY - startY,
      };
    }, mouseMove), mouseUp);
  }, mouseDown);

  flyd.on(({ top, left }) => {
    console.log('Current element position', { top, left });
    dragElm.style.top = `${top}px`;
    dragElm.style.left = `${left}px`;
  }, mouseDrag);
});