const url = "https://task-api.fstropii.com";
const localhostUrl = "http://localhost:8000";
const logoutBtn = document.querySelector('.nav-logout');
const changeEmailBtn = document.querySelector('#change-email-btn');
const addTaskBtn = document.querySelector('.add-task-button');

logoutBtn.addEventListener("click", function() {
  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  window.location.href = '/';
});

// modals

changeEmailBtn.addEventListener("click", function() {
  const emailModal = document.querySelector('.email-modal');
  const closeEmailModalBtn = document.querySelector('.close-email-modal');
  emailModal.classList.add('visible');

  closeEmailModalBtn.addEventListener("click", function() {
    emailModal.classList.remove("visible");
  });
});

addTaskBtn.addEventListener("click", function() {
  const taskModal = document.querySelector('.add-task-modal');
  const closeTaskModalBtn = document.querySelector('.close-task-modal');
  const submitTaskBtn = document.querySelector('.submit-add-task-btn');
  taskModal.classList.add('visible');

  closeTaskModalBtn.addEventListener('click', function() {
    taskModal.classList.remove("visible");
  });

  submitTaskBtn.addEventListener("click", function(e) {
    e.preventDefault();
    const taskName = document.querySelector('.add-task-modal-name-input').value;
    const taskDescription = document.querySelector('.add-task-modal-description-input').value;
    if (taskName == "" || taskName == undefined) {
      setTaskTooltip("add", "error", "Please enter a name");
      return;
    }
    const getUserTasksPromise = getUserTasks(token);
    getUserTasksPromise.then((res) => res.json()).then((json => {
      let taskId = 0;
      const tasks = json.tasks;
      if (tasks != null) {
        let tasksLength = tasks.length;
        taskId = tasksLength + 1;
      }

      const newTaskPromise = newTask(taskName, taskDescription, taskId, token);
      newTaskPromise.then((res) => res.json()).then((json => {
        window.location.reload();
      }));
    }));
  });
});

// Check if the user is logged in
const getCookie = (returnType) => {
  let decodedCookie = decodeURIComponent(document.cookie);
  if (decodedCookie == "") {
    return;
  }

  let ca = decodedCookie.split(',');

  const token = ca[0].split("token=")[1];
  const type = ca[1].split("type=")[1];
  const expiresDay = ca[2].split("expires=")[1];
  const expiresDate = ca[3]
  const expires = `${expiresDay}${expiresDate}`
  
  if (returnType == "token") {
    return token;
  } else if (returnType == "type") {
    return type
  } else if (returnType == "expires") {
    return expires;
  }

  return null;
}

const token = getCookie("token");

if (token == undefined) {
  // no user
  window.location.href = '/';
}

const setTooltip = (type, message) => {
  tooltip.classList.add(type);
  tooltip.classList.add('visible');
  tooltip.innerText = message
  tooltip.style.display = "block";
}

const setTaskTooltip = (taskType, type, message) => {
  const taskTooltip = document.querySelector(`.${taskType}-task-tooltip`);
  taskTooltip.classList.add(type);
  taskTooltip.classList.add('visible');
  taskTooltip.innerText = message
  taskTooltip.style.display = "block";
}


// loading user tasks
const loadUserTasks = () => {
  const tasksPromise = getUserTasks(token);
  tasksPromise.then((res) => res.json()).then((json => {
    const tasks = json.tasks
    if (json.tasks == null) {
      return;
    }

    for (let i = 0; i < tasks.length; i++) {
      createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], tasks[i]['task_id']);
    }

    const checkboxes = document.querySelectorAll('.checkbox');

    for (let j = 0; j < checkboxes.length; j++) {
      checkboxes[j].addEventListener("click", function() {
        setTooltip("info", `Updating task '${tasks[j]['title']}'`);
        const updateTaskPromise = updateTask(token, tasks[j]['title'], tasks[j]['description'], checkboxes[j].checked, tasks[j]['task_id']);
        updateTaskPromise.then((res => {
          setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
          window.location.reload();
        }));
      });
    }

    const userTasks = document.querySelectorAll('.user-task');
    for (let j = 0; j < userTasks.length; j++) {
      userTasks[j].addEventListener("click", function() {
        // I know this looks like hell. It is
        const taskSubmitBtn = document.querySelector('.submit-task-btn');
        const taskDeleteBtn = document.querySelector('.delete-task-btn');
        const taskTitle = tasks[j]['title'];
        const taskDescription = tasks[j]['description'];
        const taskCompletedStatus = tasks[j]['is_completed'];
        const taskModal = document.querySelector('.task-modal');
        const taskModalTitle = document.querySelector('.task-modal-title');
        const taskModalDescription = document.querySelector('.task-modal-description');
        const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status');
        const closeTaskModal = document.querySelector('.close-edit-task-modal');
        const taskId = tasks[j]['task_id'];

        taskModalTitle.placeholder = taskTitle;
        taskModalDescription.placeholder = taskDescription;
        taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no";
        taskModal.classList.add('visible');

        closeTaskModal.addEventListener("click", function() {
          taskModal.classList.remove('visible');
        });

        taskSubmitBtn.addEventListener('click', function(e) {
          e.preventDefault();
          const newTaskTitle = document.querySelector('.task-modal-title').value != "" ? document.querySelector('.task-modal-title').value : taskTitle;
          const newTaskDescription = document.querySelector('.task-modal-description').value != "" ? document.querySelector('.task-modal-description').value : taskDescription;
          const updateTaskPromise = updateTask(token, newTaskTitle, newTaskDescription, taskCompletedStatus, taskId);
          updateTaskPromise.then((res) => res.json()).then((json => {
            window.location.reload();
          }));
        });

        taskDeleteBtn.addEventListener("click", function(e) {
          e.preventDefault();
          const deleteTaskPromise = deleteTask(token, taskId);
          deleteTaskPromise.then((res => {
            window.location.reload();
          }));
        })
      });
    }
  }));
}

const getUserTasks = (userToken) => {
  const res = fetch(`${url}/users/me`, {
    headers: {Authorization: `Bearer ${userToken}`}
  });

  return res;
}

const createTaskItem = (title, isCompleted, index) => {
  const userTasksDiv = document.querySelector('.user-tasks');
  const taskItemDiv = document.createElement('div');
  taskItemDiv.className = 'task-item';

  const taskCheckbox = document.createElement('input');
  taskCheckbox.className = `checkbox-${index} checkbox`;
  taskCheckbox.type = 'checkbox';

  if (isCompleted == true) {
    taskCheckbox.checked = true;
  }

  const taskLabel = document.createElement('li');
  taskLabel.innerHTML = title;
  taskLabel.className = `task-${index} user-task`;


  taskItemDiv.appendChild(taskCheckbox);
  taskItemDiv.appendChild(taskLabel);
  userTasksDiv.appendChild(taskItemDiv);
}

const updateTask = (userToken, taskTitle, taskDescription, completedStatus, taskId) => {

  const res = fetch(`${url}/user/update-tasks`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
    body: JSON.stringify({
      "title": taskTitle,
      "description": taskDescription,
      "is_completed": completedStatus,
      "task_id": taskId
    })
  });

  return res;
}

const newTask = (title, description, taskId, userToken) => {
  const res = fetch(`${url}/user/update-tasks`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      "title": title,
      "description": description,
      "is_completed": false,
      "task_id": taskId
    })
  });

  return res;
}

const deleteTask = (userToken, taskId) => {
  const res = fetch(`${url}/user/delete-task`, {
    method: "DELETE",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      task_id: taskId
    })
  });

  return res;
}

loadUserTasks();