const tasks = [
    {
        id: 1,
        completed: false,
        title: "Buy groceries for the week",
        description: "Pick up vegetables, fruits, milk, eggs, and bread from the supermarket.",
        dueDate: "14/03/2026",
        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
    },
    {
        id: 2,
        completed: false,
        title: "Clean the apartment",
        description: "Vacuum the floors, wipe kitchen surfaces, and take out the trash.",
        dueDate: "16/03/2026",
        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
    },
    {
        id: 3,
        completed: false,
        title: "Call the dentist for appointment",
        description: "Book a routine checkup and confirm available time slots for next week.",
        dueDate: "17/03/2026",
        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
    },
    {
        id: 4,
        completed: true,
        title: "Do laundry and fold clothes",
        description: "Wash dark and light loads separately, then fold and organize clean clothes.",
        dueDate: "21/03/2026",
        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
    }
];

// GLOBALS

const $taskForm = document.getElementById('taskForm');
const $toDoList = document.getElementById('toDoList');
const $completedList = document.getElementById('completedList');

// EVENT LISTENERS
window.addEventListener("DOMContentLoaded", () => {
    displayTasks();
})

// DISPLAY TASKS

function displayTasks(){

    function formatTask(task){
        const li = document.createElement("li");

        li.classList.add('card','p-3','mt-2');
        const done = task.completed 
            ? "text-decoration-line-through opacity-50" 
            : "";
        li.innerHTML = `
        <div class="d-flex justify-content-between align-items-start">
            <h4 class="${done} col-11">${task.title}</h4>
            <button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
        </div>
        <p class="${done}">${task.description}</p>
        <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
            <div class="d-flex justify-content-between align-items-end">
                <div>
                    ${
                        task.completed 
                            ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
                            : `
                                <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
                                <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
                            `
                    }
                    </div>
                <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
            </div>
        `;

        return li;

    }

    $toDoList.innerHTML = "";
    $completedList.innerHTML = "";

    tasks.forEach(task => {
        const formattedTask = formatTask(task);
        task.completed 
            ? $completedList.appendChild(formattedTask) 
            : $toDoList.appendChild(formattedTask)
    })
}