//tworzymy zmienne, dzięki którym uzyskamy dostęp do kluczowych elementów HTML w projekcie
//tworzymy je jako stałe bo nie będziemy im już przypisywać innych wartości
const choosenPicture = document.querySelector("#select-picture");
const canvas = document.querySelector("#meme");
const textTop = document.querySelector("#text-top");
const textBottom = document.querySelector("#text-bottom");
const downloadButton = document.querySelector('#download-button'); 
//zmienna globalna przechowująca nasz wybrany obrazek w formie URL
let picture;

//ukrywamy przycisk pobierz
downloadButton.style.display='none';

//Na przycisku, którym wybieramy obrazki ustawiamy tzw obserwator zdarzeń którego zadanie będzie monitorować każdą zmiane tego elementu
//dla nas ozacza to tyle że jak wybierzemy obrazek to kod dla zdarzenia zostanie wykonany
//parametr e(event) przekazuje informacje o danym zdarzeniu i elemencie 
choosenPicture.addEventListener("change", function(e){

//tworzymy ciąg znaków (URL), który będzie repreznetować nasz obiekt obrazka i ułatwi to jego wykorzystanie w kodzie
//jako parametr metoda ta przyjmuje plik, wykorzystujemy parametr e aby zwrócić pierwszy obrazek, który wybraliśmy
const pictureUrl = URL.createObjectURL(e.target.files[0]);

//konstruktor ten tworzy nam nowy elelemnt html - <img>
picture = new Image();
//ustawiamy ścieżkę do obrazka
picture.src = pictureUrl;
 
//wczytywanie obrazka po wybraniu w canvasie
  picture.addEventListener("load",function(){
     console.log('wczytywanie obrazka...');
    updateMeme(canvas,picture,textTop.value,textBottom.value);
    });
    downloadButton.style.display='block';
});


//na jakąkolwiek zmianę w inpucie tekstu górnego odświeżamy obrazek w canvasie
textTop.addEventListener("change", function(){
  
  updateMeme(canvas, picture, textTop.value,textBottom.value);
});

//na jakąkolwiek zmianę w inpucie tekstu dolnego odświeżamy picture w canvasie
textBottom.addEventListener("change", function(){
  
  updateMeme(canvas, picture, textTop.value,textBottom.value);
});

function updateMeme(canvas, picture, textTopTexBottom){
  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(textTop, canvasWidth / 2, offsetY);
  ctx.fillText(textTop, canvasWidth / 2, offsetY);
  
  ctx.textBaseline = "bottom";
  ctx.strokeText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
  ctx.fillText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
}

downloadButton.addEventListener("click", function() {
  const dataURL = canvas.toDataURL("image/jpeg");
  const a = document.createElement('a');
  a.href = dataURL;
  a.download = 'meme.jpeg';
  a.click();
});