import React, {useCallback, useMemo, useState} from 'react';
import Todo from "./components/Todo";

function App() {
    const [tasks, setTasks] = useState(JSON.parse(localStorage.getItem('tasks')) || {
        tasks: [],
        error: false
    });
    const done = useMemo(() => tasks.tasks.filter(e => e.done).length, [tasks]);

    function onSubmit(e) {
        e.preventDefault();
        if (e.target.children[0].value.length <= 3) {
            setTasks({
                tasks: tasks.tasks,
                error: true
            });
            return;
        }

        setTasks({
            tasks: [...tasks.tasks, {
                id: tasks.tasks.length,
                text: e.target.children[0].value,
                done: false
            }],
            error: false
        });
        e.target.children[0].value = '';
    }

    function onClick(task) {
        setTasks({
            tasks: tasks.tasks.map(e => {
                return Object.assign(e, {done: e.id === task.id ? !e.done : e.done});
            }),
            error: tasks.error
        });
    }

    function onDelete(task) {
        setTasks({
            tasks: tasks.tasks.filter(e => e.id !== task.id),
            error: tasks.error
        });
        localStorage.setItem('tasks', JSON.stringify(tasks)); // Короче, это только при onDelete должно выполняться.
    }

    return (
        <div className="container">
            <h1>To-do</h1>
            <Todo onDelete={onDelete} onSubmit={onSubmit} tasks={Object.assign(tasks, {done})} onClick={onClick}/>
        </div>
    )
}

export default App;