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');
  const carousel = document.getElementById('carousel');
  const carouselDots = document.getElementById('carousel-dots');
  let currentIndex = 0;

  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;
  }

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

  function updateDots() {
      const dots = document.querySelectorAll('.dot');
      dots.forEach((dot, index) => {
          dot.classList.toggle('active', index === currentIndex);
      });
  }

  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
  const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
  const degGlobal = 360 / global_project_list.length;

  let carousel_css = $(".carousel"),
    currdeg  = 0

  let width = window.innerWidth;

  global_project_list.forEach((project, index) => {
      const projectDiv = document.createElement('div');
      projectDiv.classList.add('project');
      projectDiv.classList.add('item');
      projectDiv.classList.add(letter[index]);
      projectDiv.innerHTML = `
      <h2>${project.name}</h2>
      <p>${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);
      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;

      // 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';
          };
      });

      // Create a dot for each project
      const dot = document.createElement('div');
      dot.classList.add('dot');
      dot.addEventListener('click', () => {
        const targetDeg = index * degGlobal;
        const diff = targetDeg - currdeg;
        currdeg +=diff;
        currdeg=-currdeg;
        currentIndex = index;
        carousel_css.css({
            "-webkit-transform": `rotateY(${currdeg}deg)`,
            "-moz-transform": `rotateY(${currdeg}deg)`,
            "-o-transform": `rotateY(${currdeg}deg)`,
            "transform": `rotateY(${currdeg}deg)`
        });
        updateDots(); // Update active dot styles
      });
      carouselDots.appendChild(dot);
  });

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


  

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - degGlobal;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + degGlobal;
  }
  if(currdeg > 360){
    currdeg = currdeg%360;
  }
  carousel_css.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

}

function handleResize() {
  window.location.reload();
}

window.addEventListener('resize', handleResize);

function isMobileDevice() {
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

window.addEventListener('DOMContentLoaded', (event) => {
  if (isMobileDevice()) {
      const body = document.body;
      const downloadApp = document.getElementById('download');
      // Apply hidden to all children of body except the downloadApp element
      body.childNodes.forEach((child) => {
          if (child.nodeType === 1 && child !== downloadApp) { // Check if the child is an element node
              child.style.display = 'none';
          }
      });
      const newH1 = document.createElement('h1');
      newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
      newH1.classList.add('global_title');
                // Append the new h1 element to the body
      body.appendChild(newH1);
  }
});
let titleIsReadable = true;

function change_title_style(){
  const titlePlaceHolder = document.getElementById('title-global');
  const ball = document.getElementById('ball');
  const xyz = document.getElementById('xyz');
  const h1_title = document.getElementById('h1-title');
  if(titleIsReadable){
    titleIsReadable = false;
    titlePlaceHolder.classList.add('container-title');
    ball.style.display = 'block';
    xyz.style.display = 'block';
    h1_title.style.display = 'none';
  } else {
    titleIsReadable = true;
    titlePlaceHolder.classList.remove('container-title');
    ball.style.display = 'none';
    xyz.style.display = 'none';
    h1_title.style.display = 'block';
  }
 
  

} 
change_title_style();