const pendingList = document.getElementById("js-pending"),
  finishedList = document.getElementById("js-finished"),
  form = document.getElementById("js-form"),
  input = form.querySelector("input"); //먼저 DOM 변수를 설정해준다.

const PENDING = "pedning";
const FINISHED = "finished";
// LS에 저장될 KEY값을 설정함

let pendingTasks, finishedTasks;
//LS 의 VALUE 로 저장될 LIST 값인데 여기서 명확하게 명시안해주는 이유는 load함수 설명할때 알게된다.

function init() {
  form.addEventListener("submit", handleFormSubmit);
  loadState();
  restoreState();
}
init();
//언제나 그렇듯이 init함수를 만들고 안에 몇가지 함수를 추가한다.

function getTaskObject(text) {
  return {
    id: String(Date.now()), // 기발한 아이디어
    text, // 이렇게 설정해도 나중에 저장될떄는 text:text이런식으로 저장됨.
  };
}

function savePendingTask(task) {
  pendingTasks.push(task);
}

function handleFormSubmit(e) {
  e.preventDefault();
  const taskObj = getTaskObject(input.value); //getTask 함수는 여기서 딱 한 번 쓰이기 때문에 따로 빼지 않아도 상관없는데 니코는 강조하기 위해 따로 빼둔것 같다
  input.value = "";
  paintPendingTask(taskObj);
  savePendingTask(taskObj);
  saveState();
} // 그다음 pending에 뿌려주고 pendinglist에 값을 입력한다음 LS를 저장한다.

function removeFromPending(taskId) {
  pendingTasks = pendingTasks.filter(function (task) {
    return task.id !== taskId;
  });
}

function removeFromFinished(taskId) {
  finishedTasks = finishedTasks.filter(function (task) {
    return task.id !== taskId;
  });
}
// tasklist 중에 li.id가 아닌것만 찾아서 다시 list에 넣으라는 뜻

function deleteTask(e) {
  const li = e.target.parentNode;
  li.parentNode.removeChild(li);
  removeFromFinished(li.id);
  removeFromPending(li.id);
  saveState();
}

function buildGenericLi(task) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  const deleteBtn = document.createElement("button");
  span.innerText = task.text;
  deleteBtn.innerText = "❌";
  deleteBtn.addEventListener("click", deleteTask);
  // li, span, 삭제 button을 만든다. 삭제버튼에는 함수를 추가하여 기능을 입힌다.
  li.append(span, deleteBtn);
  // 그리고 li에 span과 삭제버튼을 child로 입력함
  li.id = task.id; // li id 도 설정해줌
  return li; // 나중에 ul의 child로 넣어주기 위해 li을 return한다.
}

function paintPendingTask(task) {
  const genericLi = buildGenericLi(task);
  // buildGeneric 함수가 반복되기 때문에 refactoring을 해준것이다.
  const completeBtn = document.createElement("button");
  completeBtn.innerText = "✅";
  //그리고 완료버튼에 기능을 추가한다.
  completeBtn.addEventListener("click", handleFinishClick);
  genericLi.append(completeBtn);
  pendingList.appendChild(genericLi);
  //그러고 ul에 genericli 를 추가함.
}

function findInPending(taskId) {
  return pendingTasks.find(function (task) {
    return task.id === taskId;
  });
}

function addToFinished(task) {
  finishedTasks.push(task);
}

function handleFinishClick(e) {
  const li = e.target.parentNode;
  li.parentNode.removeChild(li);
  // 일단 버튼 클릭된 li는 pending 화면에서 지우고
  const task = findInPending(li.id);
  // 해당 list중에서 해당 li를 찾고 return해서 task에 할당함
  removeFromPending(li.id); //pendinglist에서 지우고
  addToFinished(task); // finishedlist 에 입력함
  paintFinishedTask(task); // 그리고 해당 li를 다시 finished 화면에 입력함
  saveState();
}

//P.S: find() 와 filter()의 차이. 조건과 일치한 결과를 딱 찾으면 바로 끝내느냐 아님 조건과 일치한 결과를 모두 찾아내느냐의 차이다. 따라서 find()는 결과값이 1개이고 filter()는 결과값이 2개이상일 수 있다.

function loadState() {
  pendingTasks = JSON.parse(localStorage.getItem(PENDING)) || [];
  finishedTasks = JSON.parse(localStorage.getItem(FINISHED)) || [];
} // Tasks는 LS에 저장된 PENDING인데 없을 경우 빈 list(array)를 할당한다. 조건부 할당이기 때문에 ("||" 때문에) 애초에 명시안해준것이다.

function restoreState() {
  pendingTasks.forEach(function (task) {
    paintPendingTask(task);
  });
  finishedTasks.forEach(function (task) {
    paintFinishedTask(task);
  });
} // load에서 Tasks가 할당되었기 때문에 Tasks안에 있는 값들을 forEach 함수를 돌려 하나하나 손수 화면에 입력한다.

function paintFinishedTask(task) {
  const genericLi = buildGenericLi(task);
  const backBtn = document.createElement("button");
  backBtn.innerText = "⏪";
  backBtn.addEventListener("click", handleBackClick);
  genericLi.append(backBtn);
  finishedList.append(genericLi);
} // pending과 동일한 로직이다. span,li,button(기능추가) 한다음 ul 의 child로 추가한다.