const chosenPicture = document.querySelector("#select-picture");
const canvas = document.querySelector("#meme");
const textTop = document.querySelector("#text-top");
const textBottom = document.querySelector("#text-bottom");

let picture;

chosenPicture.addEventListener("change", function (e) {
  const pictureUrl = URL.createObjectURL(e.target.files[0]);

  picture = new Image();
  picture.src = pictureUrl;

  picture.addEventListener("load", function () {
    console.log("wczytywanie obrazka...");

    updateMeme(
      canvas,
      picture,
      textTop.value,
      textBottom.value
    );
  });
});

function updateMeme(canvas, picture, topText, bottomText) {
  const ctx = canvas.getContext("2d");

  const canvasWidth = picture.width;
  const canvasHeight = picture.height;
  const fontSize = Math.floor(canvasWidth / 20);
  const offsetY = canvasHeight / 25;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  ctx.drawImage(picture, 0, 0);

  ctx.strokeStyle = "black";
  ctx.lineWidth = Math.floor(fontSize / 4);
  ctx.fillStyle = "white";
  ctx.textAlign = "center";
  ctx.lineJoin = "round";
  ctx.font = `${fontSize}px Lato`;

  ctx.textBaseline = "top";
  ctx.strokeText(topText, canvasWidth / 2, offsetY);
  ctx.fillText(topText, canvasWidth / 2, offsetY);

  ctx.textBaseline = "bottom";
  ctx.strokeText(bottomText, canvasWidth / 2, canvasHeight - offsetY);
  ctx.fillText(bottomText, canvasWidth / 2, canvasHeight - offsetY);
}