// Save all the tasks
var todoList = new Array();

// Function to display the box to add a new task
function displayNewItem() {
   document.getElementById("main-add-button").style.display = "none";
   document.getElementById("cancel-button").style.display = "block";
   document.getElementById("new-item-creation").style.display = "block";

}

// Function to hide the box to add a new task
function cancelAdding() {
   document.getElementById("main-add-button").style.display = "block";
   document.getElementById("cancel-button").style.display = "none";
   document.getElementById("new-item-creation").style.display = "none";
   document.getElementById("todoName").value = "";
}

// Function to create a new task
function createItem() {
   // if the task is correct
   if (!isTaskCorrect()) {
      return;
   }

   // We get the elements placed in the form of the new task
   var todoName = document.getElementById("todoName").value;
   var todoDetails = document.getElementById("todoDetails").value;
   var todoDate = document.getElementById("todoDate").value;

   // We add a new task by filling an anonymous object and putting it inside the array
   todoList.push({title: todoName, details: todoDetails, deadline: todoDate, done: false, unfolded: false});

   // We get the ID of the new task
   var id = todoList.length -1;

   var node = document.createElement("LI");
   node.classList.add("list-item");

   // We store the ID in the HTML node
   node.value = id;

   var titleDivNode = document.createElement("DIV");
   titleDivNode.value = id;
   titleDivNode.appendChild(document.createTextNode(todoName));

   // We setup a listener in order to display the details when the item will be clicked
   node.addEventListener('click', function() {
      displayDetails(titleDivNode);
   }, false);

   var deadlineDivNode = document.createElement("DIV");
   deadlineDivNode.appendChild(document.createTextNode(todoDate));

   var actionsDivNode = document.createElement("DIV");
   var checkImg = document.createElement("IMG");
   checkImg.value = id;

   // We setup a listener in order to check a task which is now done when the image will be clicked
   checkImg.addEventListener('click', function(e) {
      checkTask(e, node);
      // We stop the event propagation in order to avoid the trigger of the display details event
      e.stopPropagation();
   }, false);

   var trashImg = document.createElement("IMG");
   trashImg.value = id;

   // We setup a listener in order to delete a task when the image will be clicked
   trashImg.addEventListener('click', function(e) {
      deleteTask(e, node);
      // We stop the event propagation in order to avoid the trigger of the display details event
      e.stopPropagation();
   }, false);

   // We prepare the images
   checkImg.src = "img/checkmark.png";
   checkImg.alt = "done";
   checkImg.width = 20;
   checkImg.style.zIndex = 999;
   trashImg.src = "img/trash.png";
   trashImg.alt = "delete";
   trashImg.width = 20;
   trashImg.style.zIndex = 999;

   // We append all the elements together in order to have a new line in our list
   // We add both image in the actionsDivNode
   actionsDivNode.appendChild(checkImg);
   actionsDivNode.appendChild(trashImg);

   // We append the title, the deadline and the actionsDivNode to a new row of the list
   node.appendChild(titleDivNode);
   node.appendChild(deadlineDivNode);
   node.appendChild(actionsDivNode);

   // We append the new row of the list in the list
   document.getElementById("list").appendChild(node);

   // We reset the value of the form for the new tasks
   resetForm();
}

// Empty the fileds of the form
function resetForm() {
   document.getElementById("todoName").value = "";
   document.getElementById("todoDetails").value = "";
   document.getElementById("todoDate").value = "";
}

// Function to verify if all the fields have been filled for the new task
function isTaskCorrect() {
   var todoName = document.getElementById("todoName").value;

   if (todoName == '')
      return false;

   var todoDetails = document.getElementById("todoDetails").value;

   if (todoDetails == '')
      return false;

   var todoDate = document.getElementById("todoDate").value;
   if (todoDate == '')
      return false;

   return true;
}

// Display the details of the task clicked below its title
function displayDetails(elem) {

   const index = elem.value;

   if (!todoList[index].unfolded) {
      elem.innerHTML += "<div class='details'>" + todoList[index].details + "</div>";

   } else {
      elem.innerHTML = todoList[index].title;
   }
   todoList[index].unfolded = !todoList[index].unfolded;
}

// Check the task clicked
function checkTask(event, parent) {
   const index = event.target.value;

   todoList[index].done = !todoList[index].done;

   if (todoList[index].done) {
      parent.classList.add("done");
   } else {
      parent.classList.remove("done");
   }
}

// Delete the task clicked if the user confirms it
function deleteTask(event, parent) {
   const index = event.target.value;
   if (!todoList[index].done) {
      if(window.confirm('Warning! You are about to delete an uncompleted task... Do you want to remove it anyway?')) {
         parent.remove();
      }
   } else {
      parent.remove();
   }
}

// Delete all the tasks if the user confirms it
function deleteAllTask() {
   var wantDelete = false;
   var safeDelete = true;

   for (var i = 0; i < todoList.length; i++) {
      if (!todoList[i].done) {
         safeDelete = false;
         if (window.confirm('Warning! You are about to delete one or more uncompleted task(s)... Do you want to remove all of them anyway?')) {
            wantDelete = true;
            break;
         } else {
            break;
         }
      }
   }
   if (!safeDelete && !wantDelete)
      return;

   // The array is emptied
   todoList = new Array();
   var list = document.getElementById("list");

   // We delete all the HTML nodes contained by the list
   while (list.firstChild) {
      list.removeChild(list.firstChild);
   }
}



function login() {
   // Retrieving of the data of the form
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;

   // We create an HTTP Request
   var xhttp = new XMLHttpRequest();

   // We setup the function which will handle the response
   xhttp.onreadystatechange = function() {
      // If we received the response and everything is good so far
       if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
         // We get the JSON Object
         var resp = JSON.parse(xhttp.responseText);
         // We compare the value of the field "success" of the JSON Object
         if (resp.success == "true") {
             document.getElementById("login-form").style.display = "none";
             document.getElementById("main").style.display = "block";
             document.getElementById("error-message").style.visibility = "hidden";
         } else {
            document.getElementById("error-message").style.visibility = "visible";
         }
       }
   };
   // We open the HTTP request
   xhttp.open("POST", "http://mytodolist-env.vgnc2k3pmv.eu-west-1.elasticbeanstalk.com/login.jsp", true);
   // We setup the header
   xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   // We send the credentials with the request
   xhttp.send("username=" + username + "&password=" + password);
}