app.jsx

import "./App.css"
import { useState } from "react"

function App() {
  const [todoText, setTodoText] = useState("")
  const [todoList, setTodoList] = useState([
    { value: "do homework", isChecked: true, id: 0 },
    { value: "watch a movie", isChecked: false, id: 1 },
    { value: "make bed", isChecked: true, id: 2 }
  ])

  /*
  - Add todo
  - reset input
  - Completed state
  - Delete todo

  STATE:

  - input
  - todo list
  - completed
  */

  const addTodo = () => {
    setTodoText("abc")
    const newTodo = {
      value: todoText,
      isChecked: false
    }
    setTodoList([...todoList, newTodo])
  }

  const completeTodo = (id) => {
    const newTodos = todoList.map((todo) => {
      if (todo.id === id) {
        // update todo
        return { ...todo, isChecked: !todo.isChecked }
      }
      return todo
    })

    setTodoList(newTodos)

    // state is readonly
    // todoList[id].isChecked = true
    // todoList.push()
  }

  const deleteTodo = (id) => {
    setTodoList(???)
  }

  const todos = todoList.map((todo, todoIndex) => {
    const elementClass = todo.isChecked ? "todo-completed" : ""

    return (
      <li className={elementClass} key={todoIndex}>
        <span className="todo-text">{todo.value}</span>
        <button onClick={() => completeTodo(todo.id)}>Check</button>
        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
      </li>
    )
  })

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <h1>Todos</h1>
      <input
        type="text"
        onChange={(event) => setTodoText(event.target.value)}
        value={todoText}
        placeholder="Type something..."
      />
      <button onClick={addTodo}>Add</button>
      <ul>{todos}</ul>
    </div>
  )
}

export default App