document.addEventListener('DOMContentLoaded', () => {
    let btn = document.querySelector('.modalButton');
    btn.click();
});



/*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");
});




// https://stackoverflow.com/questions/54076532/how-to-test-if-a-point-is-inside-an-svg-closed-path


// Funcs to check whether draggable el inside Svg path

function oMousePos(elmt, evt) {
  let ClientRect = elmt.getBoundingClientRect();
  return {
    //object
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

function draggablePoints(m) {
  //top left
  draggable.p0s[0][0] = m.x - draggable.delta.x - 1;
  draggable.p0s[0][1] = m.y - draggable.delta.y - 1;
  //top right
  draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1;
  draggable.p0s[1][1] = m.y - draggable.delta.y + 1;
  //bottom right
  draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1;
  draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1;
  //bottom left
  draggable.p0s[3][0] = m.x - draggable.delta.x + 1;
  draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1;
}


m = {},// the mouse position
thePath = document.querySelector("path"),

/* Rezisable Image Stuff */
draggable = document.querySelector(".item");

draggable.addEventListener("mousedown", mousedown);

// NEw stuff
draggable.w = draggable.getBoundingClientRect().width;
draggable.h = draggable.getBoundingClientRect().height;
draggable.p0s = [[], [], [], []];//one array for every corner
draggable.delta = {};// distance between the click point and the left upper corner



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

  // NEw stuff
  draggable.delta = oMousePos(draggable, e);
  //


  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()
      }
      */

      let counter = 0;// how many corners are in path
      //m = oMousePos(drag_parent, e);
      m = oMousePos(thePath, e);
      draggablePoints(m);
      draggable.style.left = draggable.p0s[0][0] + 1 + "px";
      draggable.style.top = draggable.p0s[0][1] + 1 + "px";

      draggable.p0s.map(p => {
          if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "sark") {
              counter++;
          }
          console.log(counter, document.elementFromPoint(p[0], p[1]).id == "sark");
      });

      if (counter == 4){
          console.log("moving");
          let newX = prevX - e.clientX;
          let newY = prevY - e.clientY;

          const rect = draggable.getBoundingClientRect();

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

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

      else {
          console.log("Out of Bounds!");
          //console.log(counter);
          // Set it to init pos; from downtown
          // it.style.left = brr.left + 200;
          console.log(draggable.p0s);
      }

    }
  }

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

}




// Resizing Pic


let isResizing = false;
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 = draggable.getBoundingClientRect();

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

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

      else {
        draggable.style.width = rect.width + (prevX - e.clientX) + "px";
        draggable.style.height = rect.height + (prevY - e.clientY) + "px";
        draggable.style.top = rect.top - (prevY - e.clientY) + "px";
        draggable.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;







/* Ending stuff + Reset */


// 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)", "#4BB543");
        moveOnEnable();
    }
    else
        message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
});

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

    let tst = document.querySelectorAll(".resizer");
    for (elinjo of tst){
        elinjo.style.height = 0;
        elinjo.style.width = 0;
    }

}

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


    // Moving IMg Corners
    let tst = document.querySelectorAll(".resizer");
    for (elinjo of tst){
        elinjo.style.height = "7px";
        elinjo.style.width = "7px";
    }

})