Untitled

const projectNameInput = document.getElementById("projectNameInput");
const addProjectBtn = document.querySelector(".add-project");
const projectForm = document.querySelector(".projectForm");
const formCancelBtn = document.getElementById("formCancelBtn");

const projectNameValidation = () => {
    projectNameInput.addEventListener("keyup", () => {
        const isValidInput = projectNameInput.checkValidity();
        if (!isValidInput) {
            document.querySelector(".invalidPattern").textContent = "Project name must begin with letters";
        } else {
            document.querySelector(".invalidPattern").textContent = "";
        }
    });
};

const handleProjectForm = () => {
    addProjectBtn.addEventListener("click", () => {
        projectForm.classList.add("open");
    });
    formCancelBtn.addEventListener("click", () => {
        projectForm.classList.remove("open");
        projectForm.reset();
        document.querySelector(".invalidPattern").textContent = "";
    });

    let attrbInt = 0;

    projectForm.addEventListener("submit", (e) => {
        e.preventDefault();

        // const pageHeading = document.querySelector(".task-page");
        const projectTitles = document.querySelector(".project-titles");
        const parentDiv = document.createElement("div");
        parentDiv.classList.add("projectDiv");
        const deleteProject = document.createElement("span");
        attrbInt = projectTitles.getElementsByClassName("projectDiv").length;

        {
            parentDiv.setAttribute("data-project", attrbInt);
            const allDivs = projectTitles.querySelectorAll("div");
            for (let i = 0; i < allDivs.length; i++) {
                if (projectNameInput.value === allDivs[i].id || projectNameInput.value === "Example Project") {
                    alert("Project name must be unique");

                    projectForm.reset();
                    return false;
                } else {
                    parentDiv.id = projectNameInput.value;
                    parentDiv.setAttribute("class", "projectDiv tile");
                }
                parentDiv.textContent = projectNameInput.value;
            }
        }
        {
            deleteProject.setAttribute("class", "deleteProject");
            deleteProject.addEventListener("click", deleteProjectFunc);
            // deleteProjectFunc(parentDiv, deleteProject);
            // deleteProject.addEventListener("click", () => {
            //     const pageHeading = document.querySelector(".task-page");
            //     pageHeading.textContent = "Example Project";
            //     // const exampleProjectTable = document.querySelector(".exampleProjectTable");
            //     // exampleProjectTable.classList.add("exampleProject");
            //     // const exampleProject = document.querySelector("[data-project='0']");
            //     // exampleProject.classList.add("active");

            //     parentDiv.remove();
            // });
        }
        parentDiv.appendChild(deleteProject);
        projectTitles.appendChild(parentDiv);
        projectForm.reset();
        projectForm.classList.remove("open");
    });
};

// const deleteProjectFunc = (parentDiv, deleteProjectBtn) => {
//     // const deleteProjectBtn = document.querySelectorAll(".deleteProjectBtn");
//     const pageHeading = document.querySelector(".task-page");

//     // const projectTitlesAll = document.querySelectorAll(".project-titles");
//     const exampleProjectTable = document.querySelector(".exampleProjectTable");
//     const exampleProject = document.querySelector("[data-project='0']");
//     deleteProjectBtn.addEventListener("click", () => {
//         let loaded = false;
//         document.addEventListener("DOMContentLoaded", () => {
//             loaded = true;
//         });
//         if (loaded) {
//             const allTasks = document.querySelector(".all-tasks");
//             allTasks.classList.add("active");
//             pageHeading.textContent = allTasks.textContent;
//         }

//         parentDiv.remove();
//     });
//     if (deleteProjectBtn) {
//         const allTasks = document.querySelector(".all-tasks");
//         allTasks.classList.add("active");
//     }
// };

const deleteProjectFunc = (e) => {
    let tile = e.target.closest(".tile");
    tile.remove();
    // if ()
    const allTasks = document.querySelector(".tasks").children;
    console.log(allTasks[0].classList.add("active"));
    allTasks[0].classList.add("active");

    // let index = div.dataset;
};
// const deleteProjectFunc = () => {
//     const deleteProjectBtn = document.querySelectorAll(".deleteProjectBtn");
//     const projectTitlesAll = document.querySelectorAll(".project-titles");
//     if (document.readyState === "complete" || document.readyState === "loaded") {
//         deleteProjectBtn.forEach((btn) => {
//             btn.addEventListener("click", () => {
//                 for (let i = 1; i < projectTitlesAll.length; i++) {
//                     projectTitlesAll[i].remove();
//                     console.log("test");
//                 }
//             });
//         });
//     }
// };

const addProject = () => {
    projectNameValidation();
    handleProjectForm();

    // const deleteBtn = document.querySelector(".deleteProject");
};

export default addProject;