var letters1 ="Σπαράζετε, αγριόπαπιες και μαύρες φαλαρίδες, σας ξάνοιξε ο κυνηγητής και χάρος έχει γίνει";
var letters2 ="πεθαίνετε, νά και οι στερνές του ηλιού μ’ εσάς αχτίδες, παίρνει κι από το αίμα σας της δύσης το ρουμπίνι.";
var letters3 ="Κι εσείς, και ποιού κυνηγητή σάς χτύπησε καρτέρι, πόθοι κι αγάπες, όνειρα κι ελπίδες και φροντίδες;";
var letters4 ="Κόκκινο κι απ’ το αίμα σας το πλαγιασμένο αστέρι. Πεθαίνετε, αγριόπαπιες και μαύρες φαλαρίδες.";
var letters5 ="Άξαφνα είδε στον ουρανό μια μεγάλη μαύρη ακρίδα, να χώνεται γρήγορα στην καρδιά του ήλιου";
var letters6 ="κι η Γη σκοτείνιασε";
var letters7 ="Πετάξτε το χακί ντυθείτε τα μαροκινά του Απρίλη";
var letters8 ="πάμε στους γάμους του σπάρτου και της λαδανιάς, στων άγριων μελισσών την επικράτεια";
var letters9 ="Τρέχει το μέλι στον γκρεμό, τεντώνει χορδές χρυσές στο ηχείο της σπηλιάς, τις κρούει θαλασσόβιος άνεμος";
var letters10 ="γλυκαίνεται η ερημιά κι’ αφήνεται στον οργασμό της.";
var letters11 ="Δε φτάνει το θνητό μου χέρι, στενό κι’ αδέξιο το λαγήνι μου";
var letters12 ="δεν έγινε για μένα αυτός ο πλούτος.";
var letters13 ="Ίλιγγος με τραβά, ν’ αγγίξω το άγριο μέλι το κύμα με θέλει, μ’ ερωτεύτηκε ο βυθός";
var letters14 ="τραγουδισμένο θάνατο μου τάζει. Δε θα παραδοθώ για έναν ωραίο θάνατο.";

var letters = letters1;
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letter = letters[counter];
var textColor = "black";
var canvas;
var context;
var mouse = {
  x: 0,
  y: 0,
  write: false,
};
var position = {
  x: 0,
  y: 0,
};
//console.log(letters);

$(".btn-group1 a").click(function () {
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
    $("#edit").html("Αντικατέστησέ με με το κείμενό σου");
  } else {
    $(".btn-group1 a").removeClass("selected");
    $(this).addClass("selected");
    letters = window[$(".btn-group1 a.selected").data("role")];
    $("#edit").html(letters);
  }
});

$("a#finish").click(function () {
  counter = 0;
  letters = $("#edit").html() + " ";
  minFontSize = 3;
  angleDistortion = 0;
  letter = letters[counter];
  console.log(letters);
  $("#modal").css("z-index", "-200");
  $("#modal").css("right", "-2500px");
});

$(".save").on("click", function (e) {
  e.preventDefault();
  var dataURL = canvas.toDataURL("image/jpg");
  var a = document.createElement("a");
  a.href = dataURL;
  a.download = "canvas.jpg";
  a.click();
});

function openPrintWindow() {
  const css = `
    @page {
      size: landscape;
    }
  `;

  const html = `
    <html>
      <head>
        <style>${css}</style>
      </head>
      <body>
        <img id="printImage" src="${canvas.toDataURL("image/jpg")}" />
      </body>
    </html>
  `;

  const printWindow = window.open("", "", "width=800,height=800");
  printWindow.document.open();
  printWindow.document.write(html);

  // Wait for the printImage to load
  printWindow.document
    .getElementById("printImage")
    .addEventListener("load", function () {
      printWindow.document.close();
      printWindow.print();
      printWindow.close();
    });
}

$(".print").on("click", function (e) {
  e.preventDefault();
  openPrintWindow();
});

function init() {
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // Set the canvas background color to white
  context.fillStyle = "white";
  context.fillRect(0, 0, canvas.width, canvas.height);

  canvas.addEventListener("mousedown", mouseDown);
  canvas.addEventListener("mousemove", mouseMove);
  canvas.addEventListener("mouseup", mouseUp);
  canvas.addEventListener("dblclick", doubleClick);

  // Touch events
  canvas.addEventListener("touchstart", mouseDown);
  canvas.addEventListener("touchmove", mouseMove);
  canvas.addEventListener("touchend", mouseUp);
  canvas.addEventListener("touchcancel", mouseUp);
}

function mouseMove(e) {
  const event = e.touches ? e.touches[0] : e;
  mouse.x = event.pageX;
  mouse.y = event.pageY;
  draw();
  $("#nettoyage").hide();
}

function mouseDown(e) {
  const event = e.touches ? e.touches[0] : e;
  mouse.write = true;
  position.x = event.pageX;
  position.y = event.pageY;
  $("#editControls").css("z-index", "-10");
}

function mouseUp(e) {
  const event = e.touches ? e.touches[0] : e;
  mouse.write = false;
  $("#editControls").css("z-index", "20");
}

function doubleClick(e) {
  $("#nettoyage").show();
  canvas.width = canvas.width;
}

let history = [];

function draw() {
  if (mouse.write) {
    var d = distance(position, mouse);
    var fontSize = minFontSize + d / 4;
    var letter = letters[counter];
    var stepSize = textWidth(letter, fontSize);

    if (d > stepSize) {
      var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x);

      history.push({ position: { ...position }, letter, angle, fontSize });
      if (history.length > 100) {
        history.shift();
      }

      context.font = fontSize + "px Georgia";
      context.fillStyle = textColor;
      context.save();
      context.translate(position.x, position.y);
      context.rotate(angle);
      context.fillText(letter, 0, 0);
      context.restore();
      counter++;
      if (counter > letters.length - 1) {
        counter = 0;
      }
      //console.log (position.x + Math.cos( angle ) * stepSize)
      position.x = position.x + Math.cos(angle) * stepSize;
      position.y = position.y + Math.sin(angle) * stepSize;
    }
  }
}

$(".undo").on("click", function undoLast() {
  // Clear the entire canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Remove the last draw from the history
  history.pop();

  // Redraw the history
  for (let i = 0; i < history.length; i++) {
    let h = history[i];
    context.font = h.fontSize + "px Georgia";
    context.fillStyle = textColor;
    context.save();
    context.translate(h.position.x, h.position.y);
    context.rotate(h.angle);
    context.fillText(h.letter, 0, 0);
    context.restore();
  }
});

function distance(a, b) {
  var xs = 0;
  var ys = 0;
  xs = b.x - a.x;
  xs2 = xs * xs;
  ys = b.y - a.y;
  ys2 = ys * ys;
  return Math.sqrt(xs2 + ys2);
}

function textWidth(string, size) {
  context.font = size + "px Georgia";
  if (context.fillText) {
    return context.measureText(string).width;
  } else if (context.mozDrawText) {
    return context.mozMeasureText(string);
  }
}

$("#editControls a").click(function () {
  textColor = $(this).data("role");
});

$("a#modify").click(function () {
  var foo = $("#modal").css("right");
  if (foo == "-250px") {
    $("#modal").css("z-index", "-200");
    $("#modal").css("right", "-2500px");
  } else {
    $("#modal").css("z-index", "200");
    $("#modal").css("right", "-250px");
  }
});

$("a#delete").click(function () {
  $("#modal").css("z-index", "-200");
  $("#modal").css("right", "-2500px");
});

// Instructions popup

// Get the modal
var instructionModal = document.getElementById("instructionModal");

// Get the button that opens the modal
var instructionBtn = document.getElementById("instructionBtn");

// Get the <span> element that closes the modal
var closeButton = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
instructionBtn.onclick = function () {
  instructionModal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
closeButton.onclick = function () {
  instructionModal.style.display = "none";
};

init();
