import './style.css';
import {displayTodo} from "./displaytodo"
import {displayProject} from "./displayproject"
import {canvasFunction} from "./canvas"
import {projectLocalStorage} from "./projectlocalstorage"
import {todoLocalStorage} from "./todolocalstorage"
document.addEventListener('DOMContentLoaded', () => {
    canvasFunction();
    const mainContent = document.querySelector('.main-content')
    console.log(mainContent);  
    const showButton1 = document.getElementById("showDialog1");
    const showButton2 = document.getElementById("showDialog2");
    const addProject = document.getElementById("addProject")
    const favDialog = document.getElementById("favDialog");
    const form1 = document.querySelector('#form1');
    const favDialogEdit = document.querySelector('#favDialogEdit');
    const form2 = document.querySelector('#form2');
    const form = document.querySelector('#form');
    let todos = JSON.parse(localStorage.getItem('todo-s')) || [];
    let projects = JSON.parse(localStorage.getItem('project-s')) || [];
    let editIndex;
    showButton1.addEventListener("click", () => {
        addProject.showModal();
    })
    showButton2.addEventListener("click", () => {
        favDialog.showModal();
    });
    form.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name2").value;
        if (projects.some(project => project.name === name)) {
            alert('Project with this name already exists');
            return;
        }
        function project(name) {
            this.name = name;
        }
        let newProject = new project(name);
        projects.push(newProject);
        displayProject();
        addProject.close();
        form.reset();
    });
    form1.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form1.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name").value;
        const title = document.querySelector("#title").value;
        const date = document.querySelector("#date").value;
        const priority = document.querySelector("#priority").value;
        const project = document.querySelector("#projects").value;
        function todo(name, title, date, priority, project) {
            this.name = name;
            this.title = title;
            this.date = date;
            this.priority = priority;
            this.project = project;
            this.completed = false;
        }
        let newTodo = new todo(name, title, date, priority, project);
        todos.push(newTodo);
        displayTodo();
        favDialog.close();
        form1.reset();
    });
    form2.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form2.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name1").value;
        const title = document.querySelector("#title1").value;
        const date = document.querySelector("#date1").value;
        const priority = document.querySelector("#priority1").value;
        const project = document.querySelector("#projects1").value;
        const completed = todos[editIndex].completed;
        function todo(name, title, date, priority, project) {
            this.name = name;
            this.title = title;
            this.date = date;
            this.priority = priority;
            this.project = project;
            this.completed = completed;
        }
        let editedTodo = new todo(name, title, date, priority, project);
        todos[editIndex] = editedTodo;
        displayTodo();
        favDialogEdit.close();
        form2.reset();
    })
    const deleteBtn = document.querySelector('#delete');
    deleteBtn.addEventListener('click', () => {
        todos.splice(editIndex, 1);
        displayTodo();
        favDialogEdit.close();
    });
    displayProject(projects, mainContent);
    displayTodo(todos, mainContent);
})
import { todoLocalStorage } from "./todolocalstorage";
const displayTodo = (todos, mainContent) => {
    console.log(mainContent);  
    console.log(mainContent.querySelectorAll('.project'));  
    mainContent.querySelectorAll('.project').forEach(projectDiv => {
        projectDiv.querySelectorAll('.todo').forEach(todo => todo.remove());
        const projectTodos = todos.filter(todo => todo.project === projectDiv.querySelector('h1').textContent);
        projectTodos.forEach((todo, index) => {
            const div = document.createElement('div');
            div.classList.add('todo');
            div.dataset.index = index;
            const checkbox = document.createElement('input')
            checkbox.type = 'checkbox';
            checkbox.checked = todo.completed;
            checkbox.addEventListener('change', () => {
                todo.completed = checkbox.checked;
            });
            const name = document.createElement('p');
            name.textContent = todo.name;
            const date = document.createElement('p');
            date.textContent = todo.date;
            const edit = document.createElement('button');
            edit.textContent = 'Edit';
            edit.addEventListener('click', () => {
                editIndex = index;
                document.querySelector("#name1").value = todo.name;
                document.querySelector("#title1").value = todo.title;
                document.querySelector("#date1").value = todo.date;
                document.querySelector("#priority1").value = todo.priority;
                document.querySelector("#projects1").value = todo.project;
                favDialogEdit.showModal();
            });
        div.appendChild(checkbox);
        div.appendChild(name);
        div.appendChild(date);
        div.appendChild(edit)
        projectDiv.appendChild(div);
        });
    })
    todoLocalStorage();
}
export {displayTodo}

i have written a todo app after i finshed i am seperating it into modules the displayProject is working fine but the displaytodo isn’t i get this error Uncaught TypeError: Cannot read properties of undefined (reading ‘querySelectorAll’)

i add console.log to see what the problem is mainContent is undefined for displayTodo but not displayProject even though it is called before it i think this is a timing issue but i don’t understand how