document.addEventListener("DOMContentLoaded", () => {
  getAllProject()
    .then((project_list) => {
      global_project_list = project_list;
      setupCarousel(global_project_list);
    })
    .catch((error) => {
      console.error(error);
    });
});

function formatStatus(status) {
  switch (status) {
    case 0:
      return "brouillon";
    case 1:
      return "en cours";
    case 2:
      return "terminé";
    case 3:
      return "En cours de génération";
    default:
      return "inconnu";
  }
}

function setupCarousel(global_project_list) {
  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;
    }
    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;
  }

  const carousel = document.getElementById('carousel');
  let currentIndex = 0;

  function updateCarousel() {
    const projectWidth = document.querySelector('.project').clientWidth;
    carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
  }

  function showPrevProject() {
    if (currentIndex > 0) {
      currentIndex--;
      updateCarousel();
    } else {
      currentIndex = global_project_list.length - 1;
      updateCarousel();
    }
  }

  function showNextProject() {
    if (currentIndex < global_project_list.length - 1) {
      currentIndex++;
      updateCarousel();
    } else {
      currentIndex = 0;
      updateCarousel();
    }
  }

  document.getElementById('prev-button').addEventListener('click', showPrevProject);
  document.getElementById('next-button').addEventListener('click', showNextProject);

  // Populate the carousel with project data
  global_project_list.forEach(project => {
    const projectDiv = document.createElement('div');
    projectDiv.classList.add('project');
    projectDiv.innerHTML = `
      <h2>Nom : ${project.name}</h2>
      <p>Date : ${formatDate(project.start_date)}</p>
      <p>Status : ${formatStatus(parseInt(project.status))}</p>
      <div class="project_buttons">
        <button class="default-access-button">détails de ${project.name}</button>
        <button class="default-delete-button">Supprimer</button>
      </div>
    `;
    carousel.appendChild(projectDiv);

    // Add event listener for project details button
    const detailButton = projectDiv.querySelector('.default-access-button');
    detailButton.addEventListener('click', (event) => {
      event.stopPropagation();
      window.location.href = `html/projet_detail.html?id=${project.id}`;
      change_current_project(global_project_list.indexOf(project));
    });

    // Add event listener for project delete button
    const deleteButton = projectDiv.querySelector('.default-delete-button');
    deleteButton.addEventListener('click', (event) => {
      event.stopPropagation();
      const projectName = project.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(project.id).then(() => {
          location.reload();
        });
      };

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

  // Initial update to set the correct position
  updateCarousel();
}