// In real app replace with:
// import Flmngr from "flmngr";
import Flmngr from "https://cdn.skypack.dev/flmngr";

Flmngr.load({
  apiKey: "FLMNFLMN",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files',
  hookBeforeUpload: (files) => {
    for (let i=0; i<files.length; i++) {
      
      // This is a File object. Set a new name for the file like "1.png",
      // where "1" is a number of the file, and "png" - its original extension.
      let file = files[i];
      
      let ext = null;
      let indexDot = file.name.lastIndexOf(".");
      if (indexDot > -1)
        ext = file.name.substr(indexDot + 1);

      let newFileName = (i + 1) + (ext === null ? "" : ("." + ext));
      let blob = file.slice(0, file.size, file.type);
      files[i] = new File([blob], newFileName, {type: file.type});
    }
  },
}, {
  onFlmngrLoaded: () => {
    attachOnClickListenerToButton();
  }
});

function attachOnClickListenerToButton() {
  
  let elBtn = document.getElementById("btn");
  
  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  let elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);
  
  // Add a listener for uploading files
  elBtn.addEventListener("click", () => {
    uploadFiles();
  });
}

function uploadFiles() {
  Flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {
      
      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        mode: "OVERWRITE",
        onFinish: (uploadedFiles) => {
          showUploadedImages(uploadedFiles);
        }
      });
      
    }
  });
  
} 

function showUploadedImages(uploadedFiles) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";
  
  let elP =  document.createElement("p");
  elP.textContent = uploadedFiles.length + " images uploaded";
  elImages.appendChild(elP);
  
  for (let uploadedFile of uploadedFiles) {
    let el = document.createElement("div");
    el.className = "image";
    elImages.appendChild(el);   
    
    let elImg = document.createElement("img");
    elImg.src = uploadedFile.url;
    elImg.alt = "Image selected in Flmngr";
    el.appendChild(elImg);
    
    let elP = document.createElement("p");
    elP.textContent = uploadedFile.url;
    el.appendChild(elP);
    
  }        
}