const buttonCleanup = document.getElementById('js-cleanup');
const buttonReset = document.getElementById('js-reset');
const areaResult = document.getElementById('js-result');
const areaReserve = document.getElementById('js-reverse');
const areaNumber = document.getElementById('js-number');
const values = [10000, 1000, 100, 10, 1];
let draggedElement = null;
let dragToRemove = false;
let result = 0;

function getValue(element) {
  const val = element.dataset.value;
  return parseInt(val);
}

function updateResult() {
  areaResult.innerHTML = result;
}

function addElement(element) {
  const value = getValue(element);
  result = result + value;
  updateResult();
}

function removeElement(element) {
  const value = getValue(element);
  result = result - value;
  updateResult();
}

function createElement(value) {
  const element = document.createElement('div');
  element.setAttribute('class', 'box card');
  element.setAttribute('data-value', value);
  element.setAttribute('draggable', true);
  element.innerHTML = value;
  return element;
}

function start() {
  [...values].reverse().forEach(value => {
    const element = createElement(value);
    areaReserve.appendChild(element);
  });
}

/** drop somewhere **/
document.addEventListener("drop", function (event) {
  event.preventDefault();
  document.getElementById('js-number').classList.remove("-over");

  if (dragToRemove) {
    dragToRemove = false;
    removeElement(draggedElement);
    draggedElement.remove();
    draggedElement = null;
  }
  
  else if (event.target.classList.contains("number")) {    
    if (draggedElement) {
      addElement(draggedElement);
      event.target.appendChild(draggedElement.cloneNode(true));
      draggedElement = null;
    }
  }
}, false);

document.addEventListener("dragenter", function (event) {
  if (event.target.classList.contains("number") && !dragToRemove) {
    event.target.classList.add("-over");
  }
}, false);

document.addEventListener("dragleave", function (event) {
  if (event.target.classList.contains("number")) {
    event.target.classList.remove("-over");
  }
}, false);

document.addEventListener("dragover", function( event ) {
  event.preventDefault();
}, false);

document.addEventListener("dragstart", function( event ) {
  draggedElement = event.target;
  event.dataTransfer.effectAllowed = "move";
  
  if (event.target.parentNode.classList.contains('number')) {
    dragToRemove = true;
  }
}, false);

buttonCleanup.addEventListener('click', function () {
  areaNumber.innerHTML = "";
  let cleanupResult = result;

  values.forEach(value => {
    const currentTiles = parseInt(cleanupResult / value);
    const element = createElement(value);
    
    for (let i = 0; i < currentTiles; i++) {
      areaNumber.appendChild(element.cloneNode(true));
    }
    
    cleanupResult = cleanupResult - currentTiles * value;
  });
});

buttonReset.addEventListener('click', function () {
  result = 0;
  areaNumber.innerHTML = "";
  updateResult();
});

// init
start();