Home.jsx

import React, { useState } from "react";
import TaskStats from "@components/dashboard/TaskStats";
import TasksStatPercent from "@components/dashboard/TasksStatPercent.jsx";
import { useTasks } from "@context/TasksContext";
import Calendar from "@components/Calendar";
import TaskList from "@components/todolist/TaskList";
import AddTaskButton from "@components/todolist/AddTaskButton";
import Modal from "@components/todolist/Modal";

const Home = () => {
    const { tasks, setTasks } = useTasks();
    const [selectedDate, setSelectedDate] = useState(new Date());
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openModal = () => setIsModalOpen(true);
    const closeModal = () => setIsModalOpen(false);

    const newTask = () => {
        return {
            id: crypto.randomUUID(),
            name: "",
            isCompleted: false,
            dueDate: ""
        };
    };


    const saveTask = (task) => {
        const newTask = {
            ...task,
            dueDate: task.dueDate || selectedDate.toISOString().split("T")[0],
        };
        setTasks([...tasks, newTask]);
    };

    const filteredTasks = tasks.filter(task => {
        if (!task.dueDate) return false;
        const taskDate = new Date(task.dueDate);
        return taskDate.toDateString() === selectedDate.toDateString();
    });

    return (
        <div>
            <div className="p-6 bg-gray-50 dark:bg-gray-900">
                <TaskStats />
            </div>
            <div className="min-h-screen bg-gray-100 dark:bg-gray-800 p-8">

                <div className="grid grid-cols-3 grid-rows-2 gap-6 h-full">

                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 row-span-2 col-span-2">
                        <h3 className="text-lg font-semibold mb-4 dark:text-white">
                            Tasks for {selectedDate.toDateString()}
                        </h3>

                        <AddTaskButton onClick={openModal} />
                        {filteredTasks.length > 0 ? (
                            <TaskList tasks={filteredTasks} />
                        ) : (
                            <p className="text-gray-500 dark:text-gray-400 mt-4">No tasks for this day</p>
                        )}
                    </div>

                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
                        <Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
                    </div>

                    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
                        <TasksStatPercent />
                    </div>

                </div>
            </div>

            <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
        </div>
    );
};

export default Home;