// Function to display projects in a table
function display_projects() {
  // Get data from API and then generate HTML code to display the data in a table
  const table = document.getElementById("table-projects");
  const formContainer = document.getElementById('form-container');

  function showForm() {
    formContainer.style.display = 'flex';
  }

  function hideForm() {
    formContainer.style.display = 'none';
  }

  document.getElementById('show-form-button').addEventListener('click', showForm);
  document.getElementById('close-form-button').addEventListener('click', hideForm);
  document.getElementById('submit').addEventListener('click', handleFormSubmit);

  async function handleFormSubmit() {
    const nameProject = document.getElementById('name').value;
    const description = document.getElementById('description').value;
    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
      alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
        'veuillez en trouver un autre');
      return 0;
    }
    PostNewProject(nameProject, description).then(() => {
      location.reload();})

  }

  function checkName(Projects, name) {
    let res = true;
    Projects.forEach(project => {
      const ProjectName = project.name;
      if (ProjectName === name)
        res = false;
    });
    return res;
  }

  let datas = `<tr>
                <th>Id</th>
                <th>Name</th>
                <th>Date</th>
                <th>Status</th>
                <th>Actions</th>
                <th>Delete Project</th>
                </tr> `;
  for (let i = 0; i < global_project_list.length; i++) {
    datas += `<tr>
                <th>${global_project_list[i].id}</th>
                <th>${global_project_list[i].name}</th>
                <th>${formatDate(global_project_list[i].start_date)}</th>
                <th>${global_project_list[i].status}</th>
                <th><button class="project_detail btn btn-primary">détails de ${
      global_project_list[i].name
    }</button></th>
                <th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
                </tr>`;
  }
  table.innerHTML = datas;

  // Select all the buttons_access with the class button_project
  const buttons_access = document.getElementsByClassName("project_detail");
  const buttons_delete = document.getElementsByClassName("project_delete");
  // Add an event listener to each button
  for (let i = 0; i < buttons_access.length; i++) {
    buttons_access[i].addEventListener("click", (event) => {
      // Send data to API and then navigate to projet_detail.html page
      window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
    });
    buttons_access[i].addEventListener("click", (event) => {
      // Send data to API and then navigate to projet_detail.html page
      current_project = change_current_project(i);
    });
  }

  for (let i = 0; i < buttons_delete.length; i++) {
    buttons_delete[i].addEventListener("click", (event) => {
      const projectName = global_project_list[i].name;
      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
      document.getElementById('customAlert').style.display = 'block';

      document.getElementById('okBtn').onclick = function() {
        document.getElementById('customAlert').style.display = 'none';
        // Call your delete function here
        deleteProject(global_project_list[i].id);
      };

      document.getElementById('cancelBtn').onclick = function() {
        document.getElementById('customAlert').style.display = 'none';
      };
    });
  }
}

getAllProject()
  .then((project_list) => {
    global_project_list = project_list;
    // Call the next function here
    display_projects();
  })
  .catch((error) => {
    console.error(error);
  });