/*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 */

// Input
function getInputValue() {
    // Selecting the input element and get its value 
    let inputVal = document.getElementById("sargiText").value;
    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("txtColor"))
        stuffDone.push("txtColor");
})

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

let tmpX = document.querySelector("#sarkTekst").x;
let tmpY = document.querySelector("#sarkTekst").y;

ules.addEventListener("click" , () => {
    tmpY.baseVal[0].value-=10;
    
    if (!stuffDone.includes("txtPos"))
        stuffDone.push("txtPos");
});

alla.addEventListener("click" , () => {
    tmpY.baseVal[0].value+=10;

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

vasak.addEventListener("click", () => {
    tmpX.baseVal[0].value-=10;

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

parem.addEventListener("click", () => {
    tmpX.baseVal[0].value+=10;

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


// Vertical Pos
const vasakule = document.querySelector(".vertVasak");
const paremale = document.querySelector(".vertParem");
let testing = document.querySelector("#sarkTekst");

let angle=0;
vasakule.addEventListener("click" , () => {
    angle +=5
    testing.setAttribute("transform", "rotate("+angle+")");

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

paremale.addEventListener("click" , () => {
    angle -=5
    testing.setAttribute("transform", "rotate("+angle+")");

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



// FontZise

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

plus.addEventListener("click" , () => {
    sarkFontSize +=2;
    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");

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

minus.addEventListener("click" , () => {
    sarkFontSize-=2;
    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");

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


/* 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 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

}



/* Move on Button*/

let stuffDone = new Array();

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

chkBtn.addEventListener("click", () => {
    if (stuffDone.length == 6)
        moveOnEnable();
    console.log(stuffDone.length);
});

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

// 6