/* By Bo Ericsson, https://www.linkedin.com/in/boeric00/ */

/* eslint-disable func-names, wrap-iife, no-plusplus, no-param-reassign, no-bitwise */

// Id generator (a demo of iife, generator function, and closure)
// Outer iife to define the getId function, which returns an ever increasing integer
// with each call
const getId = (() => {
  // Inner iife to run the generator function which returns 'id', a generator object
  const id = (function* () {
    let i = 0;
    while (true) {
      yield i++;
    }
  })();

  // The 'id' generator is locked inside the outer iife's closure
  return () => id.next().value;
})();

// Returns an array of specified size with values incrementing from 0
function range(length) {
  const array = [];
  for (let i = 0; i < length; i++) {
    array.push(i);
  }
  return array;
}

// Zone colors (used to pick colors for the object generated in each zone)
const zoneColors = ['blue', 'green', 'orange', 'darkred'];

// Obtain references to the four zones
const zones = document.querySelectorAll('.zone');

// Drag handlers
let source; // Contains a reference to the item being dragged

// Triggers when an item starts being dragged
function ondragstart(evt) {
  // Add the 'dragging' class from the item being moved
  this.classList.add('dragging');
  // Save a reference to the item being dragged
  source = this;
  evt.dataTransfer.effectAllowed = 'move';
}

function ondragover(evt) {
  evt.preventDefault();
}

function ondragenter(evt) {
  if (evt.target.classList.contains('zone')) {
    // Add the 'droppable' class of the zone element
    evt.target.classList.add('droppable');
  }
  evt.preventDefault();
}

function ondragleave(evt) {
  if (evt.target.classList.contains('zone')) {
    // Remove the 'droppable' class of the zone element
    evt.target.classList.remove('droppable');
  }
}

function ondrop(evt) {
  // Remove the 'dragging' class from the item being moved
  source.classList.remove('dragging');

  if (evt.target.classList.contains('zone')) {
    // Remove the 'droppable' class of the zone element
    evt.target.classList.remove('droppable');
    // Move the item
    evt.target.appendChild(source);
  }
  evt.preventDefault();
}

// Create items
zones.forEach((zone, zoneIdx) => {
  // Add handlers for the zone's drag events
  zone.ondragenter = ondragenter;
  zone.ondragover = ondragover;
  zone.ondragleave = ondragleave;
  zone.ondrop = ondrop;

  // Determine items to create in this zone (min 1, max 7)
  const items = ~~(Math.random() * 7) + 1;

  range(items).forEach((idx) => {
    // Create the element
    const elem = document.createElement('div');
    // Generate the text for the element
    const text = `${zoneIdx}-${idx}`;
    elem.innerHTML = text;
    // Determine type (circle or square randomly)
    const type = Math.random() > 0.5 ? 'circle' : 'square';
    elem.className = `item ${type} color-${zoneColors[zoneIdx]}`;
    // Set the element id (not necessary but demos, when inspected,
    // that items actually move, not just the innerHTML)
    elem.id = getId();
    // Enable dragging
    elem.draggable = true;
    // Handler to kickstart the dragging process
    elem.ondragstart = ondragstart;

    // Append the item to the zone
    zone.appendChild(elem);
  });
});