let img = new Image();
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

document.getElementById("upload").onchange = e => {
  let file = e.target.files[0];
  img.src = URL.createObjectURL(file);
  
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    draw();
  }
};

function draw() {
  ctx.filter = `
    brightness(${document.getElementById("brightness").value}%)
    contrast(${document.getElementById("contrast").value}%)
    blur(${document.getElementById("blur").value}px)
    grayscale(${document.getElementById("gray").value}%)
  `;
  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  let sharpenValue = document.getElementById("sharpen").value;
  if (sharpenValue > 0) applySharpen(sharpenValue);
}

function applySharpen(amount) {
  let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let pixels = imgData.data;

  for (let i = 0; i < pixels.length; i+=4) {
    pixels[i] = pixels[i] + amount * 10;
    pixels[i+1] = pixels[i+1] + amount * 10;
    pixels[i+2] = pixels[i+2] + amount * 10;
  }
  ctx.putImageData(imgData, 0, 0);
}

document.querySelectorAll("input[type=range]").forEach(r => {
  r.oninput = draw;
});

document.getElementById("download").onclick = () => {
  let link = document.createElement("a");
  link.download = "edited.png";
  link.href = canvas.toDataURL();
  link.click();
};