import React, { useEffect, useState} from 'react';
import './styles/main.css'
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";

const LOCAL_STORAGE_KEY = "react-todo-list-todos"

function App() {
    const [todos, setTodos] = useState([])

    useEffect(() => {
        const storageTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
        if (storageTodos) {
setTodos(storageTodos)
        }
    }, [])

    useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
    }, [todos])


    function addTodo(todo) {
        setTodos([todo, ...todos])
    }

    function toggleComplete(id) {
        setTodos(
            todos.map(todo => {
                if(todo.id === id) {
                    return {
                        ...todo,
                        completed: !todo.completed
                    }
                }
                return todo
            })
        )
    }

    function removeTodo(id) {
setTodos(todos.filter(todo => todo.id !== id ));
    }

    return (
        <div className="flex flex-col items-center h-screen bg-grey-300">
            <h1 className="mb-20 mt-3 text-5xl text-teal-600 underline font-mono text-lg ">React Todo</h1>
            <TodoForm addTodo={addTodo}/>
            <TodoList
                todos={todos}
                toggleComplete={toggleComplete}
            removeTodo={removeTodo}
            />
        </div>
    );
}

export default App;