let can = document.createElement("canvas");
let ctx = can.getContext("2d");
let result;
const downloadButton = document.querySelector("#download");

function filterImage(svgDataUrl, width, height) {
  const filteredImage = new Image();
  const resultPreview = document.querySelector("#result_img");

  can.width = width;
  can.height = height;

  filteredImage.onload = function () {
    ctx.drawImage(filteredImage, 0, 0, width, height);
    result = can.toDataURL();
    downloadButton.disabled = false;
    resultPreview.src = result;
  };
  filteredImage.src = svgDataUrl;
}

function loadImage(base64Image) {
  const sourceImage = new Image();
  const svg = document.querySelector("svg");
  const svgImage = svg.querySelector("image");
  const sourcePreview = document.querySelector("#source_img");
  let svgDataUrl;

  sourceImage.onload = function () {
    let svgViewBox = `0 0 ${Math.trunc((800 / this.height) * this.width)} 800`;
    svg.setAttribute("height", this.height);
    svg.setAttribute("width", this.width);
    svg.setAttribute("viewBox", svgViewBox);

    let svgString = new XMLSerializer().serializeToString(svg);
    svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);

    filterImage(svgDataUrl, this.width, this.height);
  };
  sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
}

function handleFileSelect(e) {
  const files = e.target.files;
  if (!files || !files.length) return;
  const file = files[0];
  if (!file.type.match("image.*")) return;

  const reader = new FileReader();

  reader.onload = (readerEvent) => {
    loadImage(readerEvent.target.result);
  };

  reader.readAsDataURL(file);
}

document
  .querySelector("#file_input")
  .addEventListener("change", handleFileSelect, false);

function downloadURI(_uri, _name) {
  let link = document.createElement("a");
  link.download = "distortedImageEH22.png";
  link.href = result;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

downloadButton.addEventListener("click", downloadURI);

(async () => {
  let exampleImageBlob = await fetch("../assets/image/example_qrcode.png").then(
    (r) => r.blob(),
  );

  let dataUrl = await new Promise((resolve) => {
    let reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(exampleImageBlob);
  });

  loadImage(dataUrl);
})();