/*Muutused Stuff*/

// Särgi color

let colorFill = document.querySelector("#colorFiller");
let colorStroke = document.querySelector("#colorStroke");

colorFill.addEventListener("input", () => {
    let color = colorFill.value;
    document.querySelector("#sark").style.fill = color;

    if (!stuffDone.includes("sarkColor"))
        stuffDone.push("sarkColor");
})

colorStroke.addEventListener("input", () => {
    let color = colorStroke.value;
    document.querySelector("#sark").style.stroke = color;

    if (!stuffDone.includes("sarkColor"))
        stuffDone.push("sarkColor");
})


// Img upload

const image_input = document.querySelector("#image_input");
let uploadedImg = "";

image_input.addEventListener("change", () => {
    const reader = new FileReader();
    reader.readAsDataURL(image_input.files[0])
    reader.addEventListener("load", () => {
        uploadedImg = reader.result;
        document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})`
    });

    if (!stuffDone.includes("newImg"))
        stuffDone.push("newImg");
})


/* Teksti Teema */

// Uus Tekst

function nextText() {
    document.querySelector("#sargiText").value = "";

    let curText = document.querySelector(".sarkTekst")
    let newText = curText.cloneNode(true);
    curText.classList.remove("sarkTekst")

    //Reset Stuff
    let angle=0;
    let sarkFontSize = 20;
    
    let gi6 = document.querySelector("g")
    newText.classList.add("sarkTekst")
    newText.innerHTML = "Uus Tekst";
    gi6.appendChild(newText);
}



// Input

function chgTxt() {

    let tekstVali = document.querySelector("#sargiText");
    tekstVali.addEventListener("keyup", () => {
        let sarkTekst = document.querySelector(".sarkTekst");
        sarkTekst.innerHTML = tekstVali.value;

        if (!stuffDone.includes("txt"))
            stuffDone.push("txt");
    });
}

chgTxt()


/*
function getInputValue() {
    // Selecting the input element and get its value 

    //Btn
    let inputVal = document.getElementById("sargiText").value;
    //Txt
    let sarkTekst = document.querySelector(".sarkTekst");
    sarkTekst.innerHTML = inputVal;

    if (!stuffDone.includes("newTxt"))
        stuffDone.push("newTxt");
}

function enterSubmit(){
    document.getElementById('sargiText')
    .addEventListener('keyup', event => {
            if (event.code === 'Enter')
            {
                event.preventDefault();
                getInputValue();
            }
        });
}
enterSubmit()
*/


// Color

let colorText = document.querySelector("#colorText");
colorText.addEventListener("input", () => {
    let color = colorText.value;
    document.querySelector(".sarkTekst").style.fill = color;

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
})

// Position
const ules = document.querySelector(".ules");
const alla = document.querySelector(".alla");
const vasak = document.querySelector(".vasak");
const parem = document.querySelector(".parem");

ules.addEventListener("click" , () => {
    let tmpX = document.querySelector(".sarkTekst").x;
    let tmpY = document.querySelector(".sarkTekst").y;

    tmpY.baseVal[0].value-=10;
    
    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});

alla.addEventListener("click" , () => {
    let tmpX = document.querySelector(".sarkTekst").x;
    let tmpY = document.querySelector(".sarkTekst").y;

    tmpY.baseVal[0].value+=10;

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});

vasak.addEventListener("click", () => {
    let tmpX = document.querySelector(".sarkTekst").x;
    let tmpY = document.querySelector(".sarkTekst").y;

    tmpX.baseVal[0].value-=10;

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});

parem.addEventListener("click", () => {
    let tmpX = document.querySelector(".sarkTekst").x;
    let tmpY = document.querySelector(".sarkTekst").y;

    tmpX.baseVal[0].value+=10;

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});


// Vertical Pos
const vasakule = document.querySelector(".vertVasak");
const paremale = document.querySelector(".vertParem");
let angle=0;

vasakule.addEventListener("click" , () => {
    let testing = document.querySelector(".sarkTekst");

    angle -=5
    testing.setAttribute("transform", "rotate("+angle+")");

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});

paremale.addEventListener("click" , () => {
    let testing = document.querySelector(".sarkTekst");

    angle +=5
    testing.setAttribute("transform", "rotate("+angle+")");

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});



// FontZise

const plus = document.querySelector(".plus");
const minus = document.querySelector(".minus");
let sarkFontSize = 20;

plus.addEventListener("click" , () => {
    let sarkForText = document.querySelector(".sarkTekst");

    sarkFontSize +=2;
    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});

minus.addEventListener("click" , () => {
    let sarkForText = document.querySelector(".sarkTekst");

    sarkFontSize-=2;
    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");

    if (!stuffDone.includes("txt"))
        stuffDone.push("txt");
});




/* Rezisable Image Stuff */

const el = document.querySelector(".item");
let isResizing = false;

el.addEventListener("mousedown", mousedown);

function mousedown(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  let prevX = e.clientX;
  let prevY = e.clientY;

  function mousemove(e) {
    if (!isResizing) {

      let item = document.querySelector(".item");
      item.style.pointerEvents = "none";
      let posers = document.elementFromPoint(e.x, e.y).id;
      item.style.pointerEvents = "";

      if (posers != "sark"){
          console.log(posers);

          let newX = prevX - e.clientX;
          let newY = prevY - e.clientY;

          const rect = el.getBoundingClientRect();

          el.style.left = rect.left - newX + "px";
          el.style.top = rect.top - newY + "px";

          prevX = e.clientX;
          prevY = e.clientY;

          mouseup()
      }

      else {

      let newX = prevX - e.clientX;
      let newY = prevY - e.clientY;

      const rect = el.getBoundingClientRect();

      el.style.left = rect.left - newX + "px";
      el.style.top = rect.top - newY + "px";

      prevX = e.clientX;
      prevY = e.clientY;
          
      }
    }
  }

  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }

}



const resizers = document.querySelectorAll(".resizer");
let currentResizer;

for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedown);

  function mousedown(e) {
    currentResizer = e.target;
    isResizing = true;

    let prevX = e.clientX;
    let prevY = e.clientY;

    window.addEventListener("mousemove", mousemove);
    window.addEventListener("mouseup", mouseup);

    function mousemove(e) {

      const rect = el.getBoundingClientRect();

      if (currentResizer.classList.contains("se")) {
        el.style.width = rect.width - (prevX - e.clientX) + "px";
        el.style.height = rect.height - (prevY - e.clientY) + "px";
      }
        
      else if (currentResizer.classList.contains("sw")) {
        el.style.width = rect.width + (prevX - e.clientX) + "px";
        el.style.height = rect.height - (prevY - e.clientY) + "px";
        el.style.left = rect.left - (prevX - e.clientX) + "px";
      }

      else if (currentResizer.classList.contains("ne")) {
        el.style.width = rect.width - (prevX - e.clientX) + "px";
        el.style.height = rect.height + (prevY - e.clientY) + "px";
        el.style.top = rect.top - (prevY - e.clientY) + "px";
      }

      else {
        el.style.width = rect.width + (prevX - e.clientX) + "px";
        el.style.height = rect.height + (prevY - e.clientY) + "px";
        el.style.top = rect.top - (prevY - e.clientY) + "px";
        el.style.left = rect.left - (prevX - e.clientX) + "px";
      }

      prevX = e.clientX;
      prevY = e.clientY;
    }

    function mouseup() {
      window.removeEventListener("mousemove", mousemove);
      window.removeEventListener("mouseup", mouseup);
      isResizing = false;
    }

  } // Resizing mousedown end

}

// Seting up resize Pic Pos
let brr = document.querySelector("#sark").getBoundingClientRect();
let it = document.querySelector(".item");
it.style.left = brr.left + 200;
//it.style.top = brr.top + 300;



/* Move on Button*/
function message(msg, color){
    messageBox = document.querySelector(".messageBox");
    messageBox.innerHTML = msg;
    messageBox.style.color = color;
}


let stuffDone = new Array();

const chkBtn = document.querySelector(".checkMoveOn");

chkBtn.addEventListener("click", (e) => {

    if (stuffDone.length >= 3){
        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "green");
        moveOnEnable();
    }
    else
        message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
});

function moveOnEnable(){
    const btn = document.querySelector(".moveOn");
    btn.disabled = false;
    btn.onclick = () => location.href = "";
}

// 6



// Reset Everything

const nulliBtn = document.querySelector(".nulliBtn");
nulliBtn.addEventListener("click", () => {

    stuffDone = new Array();

    //SarkColor
    document.querySelector("#sark").style.fill = "white";

    document.querySelector("#sark").style.stroke = "black";



    // Tekstid
    document.querySelector("#sargiText").value = "";

    curText = document.querySelector(".sarkTekst");
    newText = curText.cloneNode(true);
    curText.classList.remove("sarkTekst");

    let koikTekstid = document.querySelectorAll(".doneTekst");

    for (let i = 0; i < koikTekstid.length; i++) {
        koikTekstid[i].innerHTML = "";
    }

    //Reset Stuff
    angle=0;
    sarkFontSize = 20;
    
    let brro = document.querySelector("g")
    newText.classList.add("sarkTekst")
    newText.innerHTML = "Tekst";

    brro.appendChild(newText);
    document.querySelector(".sarkTekst").style.fill = "black";


    // Seting up resize Pic Pos
    let brr = document.querySelector("#sark").getBoundingClientRect();
    let it = document.querySelector(".item");
    it.style.left = brr.left + 200;
    //it.style.top = brr.top + 300;

})