// Selecteer alle knoppen en voeg een event listener toe aan elke knop
document.querySelectorAll(".btn").forEach(button => {
  button.addEventListener("click", function(event) {
    event.preventDefault(); // voorkomt pagina-verversing

    // Haal de waarde van de knop op
    const direction = event.target.value;

    fetch("/move", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ direction: direction })
    })
    .then(response => response.json())
    .then(data => {
      console.log("Success:", data);
    })
    .catch(error => {
      console.error("Error:", error);
    });
  });

  // Fetch data from the server
  async function fetchData() {
    const response = await fetch("/data");
    const data = await response.json();
    return data;
  }

  // Parse the data and show it on the website
  async function parseData() {
    const data = await fetchData();
    const sensorDataContainer = document.getElementById("sensor-data");
    sensorDataContainer.innerHTML = ""; // Clear previous data
    //for each object in json array create a new paragraph element and append it to the sensorDataContainer
    for (const [key, value] of Object.entries(data)) {
      const dataElement = document.createElement("p");
      dataElement.textContent = `${key}: ${value}`;
      sensorDataContainer.appendChild(dataElement);
    }
  }

  // Fetch and display sensor data every 5 seconds
  setInterval(parseData, 5000);
});