let uploadButton = document.getElementById("upload-button");
let chosenfile = document.getElementById("chosen-file");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".container");
let error = document.getElementById("error");
let fileDisplay = document.getElementById("file-display");

const fileHandler = (file, name, type) => {
  console.log(type)
  if (type.split("/")[0] !== "application" && type.split("/")[1] !== "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
    //File Type Error
    error.innerText = "Mohon unggah file excel ber ekstensi .xlsx";
    return false;
  }
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    //file and file name
    let fileContainer = document.createElement("figure");
    fileContainer.innerHTML += `<figcaption>${name}</figcaption>`;
    fileDisplay.appendChild(fileContainer);
  };
};

//Upload Button
uploadButton.addEventListener("change", () => {
  fileDisplay.innerHTML = "";
  Array.from(uploadButton.files).forEach((file) => {
    fileHandler(file, file.name, file.type);
  });
});

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "dragleave",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
  },
  false
);

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "drop",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
    let draggedData = e.dataTransfer;
    let files = draggedData.files;
    fileDisplay.innerHTML = "";
    Array.from(files).forEach((file) => {
      fileHandler(file, file.name, file.type);
    });
  },
  false
);

window.onload = () => {
  error.innerText = "";
};