import { useMemo, useState } from "react"
import { TaskItem } from "./components/TaskItem";
import { useTasks } from "./hooks/useTasks";

function App() {
  
  const [inputValue, setInputValue] = useState<string>('');
  const { tasks, addTask, deleteTask, toggleTask } = useTasks();

  const completedCount = useMemo(() => {
    console.log("Counting tasks...");
    return tasks.filter(t => t.completed).length;
  }, [tasks]);

  return (
    <div className="container">
      <h1>SmartX Task Manager {completedCount}</h1>

      <div className="input-group">
        <input 
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
         />
         <button onClick={() => { addTask(inputValue); setInputValue(''); }}>Add</button>
      </div>
      <div className="task-list">
        {tasks.length === 0 ? (
          <p>No task found. Lets add!</p>
        ) : (
          <ul>
            {tasks.map(task => (
              <TaskItem
                key={task.id}
                task={task}
                onDelete={deleteTask}
                onToggle={toggleTask}
              />
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}

export default App