import React, { useState } from 'react';
import './App.css';




const App = () => {
  const [tasks, setTasks] = useState([
    {
      done: true,
      text: "hello",
    },
    {
      done: true,
      text: "test",
    },
  ])
  const [newTaskText, setNewTaskText] = useState("")
  const updateNewTaskText = event => setNewTaskText(event.target.value)
  const addTask = event => {
    if (newTaskText) {
      setTasks([{ text: newTaskText, done: false }, ...tasks])
      setNewTaskText("")
    } else {
      alert("text is empty")
    }
  }
  return (
    <div className="App">

      <div id="myDIV" className="header">
        <h2>My To Do List</h2>
        <input type="text" onChange={updateNewTaskText} id="myInput" placeholder="Title..." value={newTaskText} />
        <span className="addBtn" onClick={addTask}>Add</span>
      </div>

      <ul id="myUL">
        {
          tasks.map((task, index) => (
            <li
              key={index}
              index={index}
              className={task.done ? "checked" : ""}
            >
              <span
                onClick={() => setTasks(tasks.map((taskInner, indexInner) => index == indexInner ? Object.assign(taskInner, { done: !taskInner.done }) : taskInner))}
              >
                {task.text}
              </span>
              <span
                onClick={() => setTasks(tasks.filter((t, i) => index !== i))}

                className="close">x</span>
            </li>
          ))
        }

      </ul>

    </div>
  )
}

export default App;