const taskForm = document.querySelector("#task-form");
const inputTask = document.querySelector("#task");
const mainCollection = document.querySelector(".collection");
const clearTask = document.querySelector(".clear-tasks");

// Function to save tasks to local storage
function saveTasksToLocalStorage(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from local storage
function loadTasksFromLocalStorage() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(function(task) {
        addTaskToList(task);
    });
    return tasks;
}

// Load tasks from local storage when the page loads
let tasks = loadTasksFromLocalStorage();

// Event listener for form submission
taskForm.addEventListener("submit", function(e){
    e.preventDefault();

    const inputValue = inputTask.value.trim();
    if(!inputValue){
        alert("Fill the input field");
        return;
    }

    addTaskToList(inputValue);
    tasks.push(inputValue);
    saveTasksToLocalStorage(tasks);
    inputTask.value = "";
});

// Function to add task to the list
function addTaskToList(taskContent) {
    const liElement = document.createElement("li");
    liElement.className = "collection-item";
    liElement.innerHTML = `
        <span class="task-text">${taskContent}</span>
        <a href="#" class="delete-item secondary-content">
            <i class="fa fa-remove"></i>
        </a>
        <a href="#" class="edit-item secondary-content">
            <i class="fa fa-edit"></i>
        </a>`;
   
    mainCollection.appendChild(liElement);
}

// Event listener for clearing tasks
clearTask.addEventListener("click", function(e){
    e.preventDefault();
    if(confirm("Are You Sure")){
        mainCollection.innerHTML = "";
        tasks = [];
        saveTasksToLocalStorage(tasks);
    }
});

// Event listener for editing and deleting tasks
mainCollection.addEventListener("click", function(e){
    e.preventDefault();
    const currentClickElement = e.target;

    // Editing task
    if (currentClickElement.classList.contains("fa-edit")) {
        const listItem = currentClickElement.parentElement.parentElement;
        const taskTextElement = listItem.querySelector(".task-text");
        const newTaskText = prompt("Edit Task:", taskTextElement.textContent.trim());
        if (newTaskText !== null) {
            taskTextElement.textContent = newTaskText;
            const index = tasks.indexOf(taskTextElement.textContent);
            tasks[index] = newTaskText;
            saveTasksToLocalStorage(tasks);
        }
    }

    // Deleting task
    if(currentClickElement.classList.contains("fa-remove")){
        const listItem = currentClickElement.parentElement.parentElement;
        if(confirm(`Are You Sure You Want To Remove This Task`)){
            listItem.remove();
            const index = tasks.indexOf(listItem.querySelector(".task-text").textContent);
            tasks.splice(index, 1);
            saveTasksToLocalStorage(tasks);
        };
    }
});