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 changePasswordBtn = document.querySelector('#change-password-btn');
const changeUsernameBtn = document.querySelector('#change-username-btn');
const addTaskBtn = document.querySelector('.add-task-button');

logoutBtn.addEventListener("click", function() {
  logout();
});

// modals

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

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

  emailSubmitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    const newEmail = document.querySelector('.modal-email-input').value;

    if (newEmail == "") {
      setModalTooltip("email", "error", "Email cannot be blank");
      return;
    }

    const updateUserEmailPromise = updateUserEmail(token, newEmail);
    updateUserEmailPromise.then((res) => res.json()).then((json => {
      const newUserEmail = json.email;
      if (newEmail == newUserEmail) {
        setModalTooltip("email", "success", "Updated email");
        logout();
      } else {
        setModalTooltip("email", "error", "Something went wrong");
      }
    }));
  });
});

changePasswordBtn.addEventListener('click', function() {
  const passwordModal = document.querySelector('.password-modal');
  const closePasswordModal = document.querySelector('.close-password-modal');
  const passwordSubmitBtn = document.querySelector('.submit-password-btn');
  passwordModal.classList.add("visible");

  closePasswordModal.addEventListener('click', function() {
    passwordModal.classList.remove('visible');
  });

  passwordSubmitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    const newPassword = document.querySelector('.modal-password-input').value;
    const verifyNewPassword = document.querySelector('.modal-verify-password-input').value;

    if (newPassword == "") {
      setModalTooltip('password', 'error', 'Password cannot be blank');
      return;
    }

    if (newPassword != verifyNewPassword) {
      setModalTooltip('password', 'error', 'Passwords must be the same');
      return;
    }

    const updateUserPasswordPromise = updateUserPassword(token, newPassword);
    updateUserPasswordPromise.then((res) => res.json()).then((json => {
      setModalTooltip('password', 'success', 'Password updated!');
      logout();
    }));
  });
});

changeUsernameBtn.addEventListener('click', function() {
  const usernameModal = document.querySelector('.username-modal');
  const closeUsernameModal = document.querySelector('.close-username-modal');
  const usernameSubmitBtn = document.querySelector('.submit-username-btn');
  usernameModal.classList.add('visible');

  closeUsernameModal.addEventListener('click', function() {
    usernameModal.classList.remove('visible');
  });

  usernameSubmitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    const newUsername = document.querySelector('.modal-username-input').value;

    if (newUsername == "") {
      setModalTooltip('username', 'error', 'Username cannot be blank');
      return;
    }

    const updateUserUsernamePromise = updateUserUsername(token, newUsername);
    updateUserUsernamePromise.then((res) => res.json()).then((json => {
      const newUserUsername = json.username;

      if (newUsername == newUserUsername) {
        setModalTooltip('username', 'success', 'Username updated');
        logout();
      } else {
        setModalTooltip('username', 'error', 'Something went wrong');
      }
    }));
  });
});

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) {
      setModalTooltip("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 setModalTooltip = (modalType, type, message) => {
  const modalTooltip = document.querySelector(`.${modalType}-task-tooltip`);
  modalTooltip.classList.add(type);
  modalTooltip.classList.add('visible');
  modalTooltip.innerText = message
  modalTooltip.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 logout = () => {
  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  window.location.href = '/';
}

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

const updateUserEmail = (userToken, email) => {
  const res = fetch(`${url}/user/update`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      email: email
    })
  });

  return res;
}

const updateUserPassword = (userToken, password) => {
  const res = fetch(`${url}/user/update`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      password: password
    })
  });

  return res;
}

const updateUserUsername = (userToken, username) => {
  const res = fetch(`${url}/user/update`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      username: username
    })
  });

  return res;
}

loadUserTasks();