const menuToggle = document.querySelector(".navbar-toggle");
const nav = document.querySelector("aside");
const navLinks = document.querySelectorAll("aside nav a");
const body = document.querySelector("body");
const closeMenu = document.querySelector("aside button");

// toggle menu
menuToggle.addEventListener("click", () => {
  nav.classList.toggle("show");
  body.classList.toggle("no-scroll");
});

// close menu when click on the link, check if aside has class show
navLinks.forEach((link) => {
  link.addEventListener("click", () => {
    if (nav.classList.contains("show")) {
      nav.classList.remove("show");
      body.classList.remove("no-scroll");
    }
  });
});

// close menu when click on the button
closeMenu.addEventListener("click", () => {
  if (nav.classList.contains("show")) {
    nav.classList.remove("show");
    body.classList.remove("no-scroll");
  }
});

const scrollBtn = document.querySelector(".scroll-to-top");
// check if window scroll is more than 100px
window.addEventListener("scroll", () => {
  if (window.scrollY > 300) {
    scrollBtn.classList.add("show");
  } else {
    scrollBtn.classList.remove("show");
  }
});

// scroll to top when click the button
scrollBtn.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
  });
});

const endpoint =
  "https://api-roadreport.pisdev.my.id/api/landing/street-segmens/report?embed=report.report";
const apiKeyHeader = "rrkr-8d99f820-zwhl-6306-9dxg-75da636f85a2";
const apiBody = {
  latitude: -7.8701358,
  longitude: 112.5258656,
  radius: 100000,
};

const map = L.map("map", {
  center: [apiBody.latitude, apiBody.longitude],
  zoom: 13,
});

const prosesIcon = "assets/images/location.png";
const tindakIcon = "assets/images/location_tindak.png";
const perbaikanIcon = "assets/images/location_perbaikan.png";

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "Profile Image Studio",
}).addTo(map);

// change zoom control position
map.zoomControl.setPosition("bottomright");

// fetch data from API
fetch(endpoint, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-KEY": apiKeyHeader,
  },
  body: JSON.stringify(apiBody),
})
  .then((response) => response.json())
  .then((data) => {
    // console.log(data);
    showData(data);
  });

// show data to the map
function showData(data) {
  data.data.forEach((item) => {
    const center = JSON.parse(item.center_point);
    const latitude = center.coordinates[1];
    const longitude = center.coordinates[0];
    const marker = L.marker([latitude, longitude], {
      icon: L.icon({
        iconUrl:
          item.report.report.status_id === "FOLUP"
            ? tindakIcon
            : item.report.report.status_id === "RPR"
            ? perbaikanIcon
            : prosesIcon,
        iconSize: [24, 24],
        iconAnchor: [12, 24],
      }),
    }).addTo(map);
    const type = item.report.user_type;
    const level = item.report.user_level;
    let typeContainer = "";

    if (type && level !== "-") {
      typeContainer = `<span style="color: var(--danger)">${type} ${level}</span>`;
    } else {
      typeContainer = "";
    }

    marker.bindPopup(
      `${typeContainer}<p style="font-size: 1rem; margin-top: 0; margin-bottom: 0.5rem">${
        item.name
      }</p><strong>Status: </strong>${
        item.report.report.status_id === "FOLUP"
          ? "Tindak Lanjut"
          : item.report.report.status_id === "RPR"
          ? "Perbaikan"
          : "Dalam Proses"
      }`
    );
  });
}

// let currentSlide = 0;
// const slides = document.querySelectorAll(".dashboard-item");
// const maxSlide = slides.length;

// // add class active to the first slide
// slides[0].classList.add("active");

// const nav = document.querySelector(".dashboard-nav");
// const buttons = nav.querySelectorAll("button");

// // add class active to the first button
// buttons[0].classList.add("active");

// // function to change the slide
// function goToSlide(slide) {
//   slides[currentSlide].classList.remove("active");
//   buttons[currentSlide].classList.remove("active");
//   currentSlide = (slide + maxSlide) % maxSlide;
//   slides[currentSlide].classList.add("active");
//   buttons[currentSlide].classList.add("active");
// }

// // function to go to the next slide
// function nextSlide() {
//   goToSlide(currentSlide + 1);
// }

// // function to go to the previous slide
// function prevSlide() {
//   goToSlide(currentSlide - 1);
// }

// // add event listener to the buttons
// buttons.forEach((button, index) => {
//   button.addEventListener("click", () => goToSlide(index));
// });

// // auto slide
// setInterval(nextSlide, 5000);

// // reset interval when user click on the button
// buttons.forEach((button) => {
//   button.addEventListener("click", () => {
//     clearInterval(nextSlide);
//   });
// });