$(document).ready(function() {

/********** Drop Zone **********/

  var formData = new FormData();
  var dropZone = document.querySelector("#drop-zone");
  dropZone.style.cursor = "pointer";
  var file = document.getElementById("filesExplorer");
  var fileProgress = document.getElementById("file-progress");
  var readyToSend = false;

  dropZone.addEventListener('click', function() {
    delete formData;
    formData = new FormData();
    file.click();
  })

  file.addEventListener('change', function() {
    dropZone.innerHTML = this.files[0].name;
    formData.append("file", this.files[0]);
    readyToSend = true;
  }, false)

  dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    delete formData;
    formData = new FormData();
    dropZone.style.borderWidth = '2px';
    var files = e.dataTransfer.files;

    if(files.length > 1) {
      $("#warningFilesNumber").modal()
      return;
    }
    dropZone.innerHTML = files[0].name;
    formData.append("file", files[0]);
    readyToSend = true;
  }, false)

  dropZone.addEventListener('dragenter', function(e) {
      console.log("Enter");
      dropZone.style.borderWidth = '5px';
  }, false);

  dropZone.addEventListener('dragleave', function(e) {
    console.log("Leave");
    dropZone.style.borderWidth = '2px';
  }, false);

  dropZone.addEventListener('dragover', function(e) {
      e.preventDefault();
  }, false);

  document.getElementById("sendButton").addEventListener('click', function() {
    var modalContent = document.getElementById("modal-content");
    var modalTitle = document.getElementById("modal-title");
    if(readyToSend) {
      var request = new XMLHttpRequest();
      request.open("POST", "/file");

      request.upload.onloadstart = function(e) {
        fileProgress.style.display = 'block';
        fileProgress.style.width = 0 + "px"
        fileProgress.innerHTML = "0%";
      }

      request.upload.onprogress = function(e) {
        var p = 100 - ((e.total - e.loaded) / e.total * 100);
        fileProgress.style.width = Math.ceil(p) + "%"
        fileProgress.innerHTML = Math.ceil(p) + "%";
      }

      request.upload.onloadend = function(e) {
        fileProgress.style.width = 100 + "%"
        fileProgress.innerHTML = "100%";
        var modalButton = document.getElementById("modal-button");

        modalButton.addEventListener('click', function(e) {
          location.reload();
        })

        modalContent.innerHTML = "Upload terminé !";
        modalTitle.innerHTML = "Félicitations";
        $("#warningFilesNumber").modal()
      }

      request.onreadystatechange = function() {
          if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
              formData = new FormData();
          }
      }

      request.send(formData);

    }
    else {
        modalContent.innerHTML = "Veuillez choisir un fichier !";
    }
  })

} );