// 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'
}, {
  onFlmngrAndImgPenLoaded: () => {
    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 editing currently shown image
  elBtn.addEventListener("click", () => {
    editImage();
  });
}

function editImage() {
  
  Flmngr.editAndUpload({
    url: decodeURI(document.getElementById("image").getAttribute("src")),
    onSave: (urlNew) => {
     
      animateLoading();
      
      // Image edited, saved and uploaded to server: change the image
      // `getNoCacheUrl` will add `?no-cache=time` parameter to force image reloading in the browser
      let elImg = document.getElementById("image");
      elImg.setAttribute("src", Flmngr.getNoCacheUrl(urlNew));
      
    },
    onFail: (error) => {
      alert("Error: " + error);
    }
  });
}

// Just for animating image while it is being reloading after change
function animateLoading() {
  let elImg = document.getElementById("image");
  let onLoaded = () => {
    elImg.classList.remove("loading");
    elImg.removeEventListener("click", onLoaded);
  }
  elImg.classList.add("loading");
  elImg.addEventListener("load", onLoaded);
}