const toDoForm = document.getElementById("toDoForm"); // form
const toDoInput = document.querySelector("#toDoForm input"); // input
const toDoList = document.getElementById("toDoList"); // ul

const TODOS_KEY = "toDos"

let toDos = []; // 업데이트 가능한 배열

// ToDo List 저장하기
function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); // 텍스트로 저장하기
}

// ToDo List 지우기
function deleteToDo(event) {
  const li = event.target.parentElement; // 클릭된 button의 부모 요소 변수에 담기
  li.remove(); // 삭제
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); // toDo id 값이 li id값과 다른 경우 남기기
  saveToDos(); // 다시 저장하기
}

// ToDo List 화면에 그리기
function paintToDo(newToDo) {
  const li = document.createElement("li"); // 변수에 li 태그 추가 담기
  li.id = newToDo.id; // li의 id 값과 newToDo의 id 값 동일하게 맞추기
  const span = document.createElement("span"); // 변수에 span 태그 추가 담기
  span.innerText = newToDo.text; // 오브젝트에 담긴 입력값 텍스트로 넣기
  
    const button = document.createElement("button"); // 변수에 button 태그 추가 담기
  button.innerText = "❌" // X 텍스트로 넣기
  button.addEventListener("click", deleteToDo); // button 클릭시 deleteToDo 함수 실행
  
  li.appendChild(span); // li 자식요소로 span 태그 추가
  li.appendChild(button); // li 자식요소로 button 태그 추가
  toDoList.appendChild(li); // ul 자식요소로 li 태그 추가
}

function handleToDoSubmit(event) {
  event.preventDefault(); // 이벤트 막기
  const newToDo = toDoInput.value; // 입력값 value에 저장
  toDoInput.value = ""; // 값 비우기
  const newToDoObj = { // newToDo 오브젝트 형식으로 변수에 담기
    text: newToDo, // 화면에 노출되는 텍스트
    id: Date.now(), // 각각의 item을 구별하기 위한 id
  };
  toDos.push(newToDoObj); // 배열 마지막에 요소 추가
  paintToDo(newToDoObj); // newToDo 값 담아서 화면에 그리기 실행
  saveToDos(); // 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); // localStorage에 저장된 ToDo List 가져와 담기

if (savedToDos !== null) { // 저장된 ToDo List의 값이 비어있지 않는 경우
  const parsedToDos = JSON.parse(savedToDos); // 텍스트를 배열로 변경하여 변수에 담기
  toDos = parsedToDos; // 이전에 저장된 ToDo List 복원하기
  parsedToDos.forEach(paintToDo); // 각각의 item에 대해 함수 실행🦜
}