// Importeer de ipcRenderer-module van Electron voor communicatie tussen processen.
// Dit maakt het mogelijk voor renderer-processen (webpagina's) om berichten te verzenden naar het hoofdproces.
const { ipcRenderer } = require("electron");

// Importeer Axios voor het maken van HTTP-verzoeken
const axios = require('axios');
 
/**
 * Functie om een modaal venster te openen.
 * Deze functie stelt event listeners in voor het openen en sluiten van de modaal.
 */
function openModal()
{
    // Verkrijg de elementen voor de modaal, de open-knop en de sluit-knop op basis van hun ID of klasse.
    const modal = document.getElementById("myModal");
    const button = document.getElementById("modalButton");
    const close = document.getElementsByClassName("close")[0];
 
    // Controleer of de elementen bestaan om fouten te voorkomen.
    if (modal && button) 
    {
        // Toon de modaal wanneer op de knop wordt geklikt.
        button.onclick = function () 
        {
            modal.style.display = "block";
        }
 
        // Sluit de modaal wanneer op het 'sluiten' icoon wordt geklikt.
        close.onclick = function () 
        {
            modal.style.display = "none";
        }
 
        // Sluit de modaal wanneer buiten de modaal wordt geklikt.
        window.onclick = function (event) 
        {
            if (event.target == modal) 
            {
                modal.style.display = "none";
            }
        }
    } 
    // else 
    // {
    //     console.error("Modaal elementen niet gevonden");
    // }
}

// document.addEventListener('DOMContentLoaded', () => {
    // Call openModal when DOM content is loaded
    openModal();
 
    // Send a message to the main process to execute the Python script
    ipcRenderer.send('run-python-script', ['some', 'arguments']);
 
    ipcRenderer.on('python-script-response', (event, pythonData) => {
        if (pythonData === 'error') {
            console.error('An error occurred while retrieving data from Python');
        } else {
            // Update HTML elements with data received from Python
            document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
        }
    });
 
    // Listen for updates to HTML data from the main process
    ipcRenderer.on('update-html-data', (event, data) => {
        // Update the HTML with the received data
        document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
        // Add similar lines for other data fields
    });
 
    // Trigger an event to request data update
    ipcRenderer.send('request-update-data');
 
    // Fetch battery data when the page loads
    fetchBatteryData();
// });
 
/**
 * Functie om een lijngrafiek te tekenen.
 * @param {Array} xLabels Labels voor de x-as.
 * @param {Array} data De data punten voor de grafiek.
 */
function drawLineChart(xLabels, data) 
{
    // Definieer Y labels (niet veranderen volgens commentaar).
    const yLabels = ["", 10, 15, 20, 25, 30, 35, 40];
 
    // Verkrijg het canvas element en de context voor tekenen.
    const canvas = document.getElementById("myCanvas");
    if (canvas) 
    {
    const ctx = canvas.getContext("2d");
    // Maak het canvas schoon voor nieuwe tekening.
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // Definieer padding en bereken grafiekafmetingen.
    const padding = 35; // Vergrote padding voor Y labels.
    const graphWidth = canvas.width - padding * 2;
    const graphHeight = canvas.height - padding * 2;
 
    // Teken de as van de grafiek.
    ctx.beginPath();
    ctx.moveTo(padding, padding);
    ctx.lineTo(padding, canvas.height - padding);
    ctx.lineTo(canvas.width - padding, canvas.height - padding);
    ctx.stroke();
 
    // Stel de kleur van de lijn in.
    ctx.strokeStyle = "rgb(143, 188, 143)";
 
    // Bereken incrementen voor het plotten.
    const xIncrement = graphWidth / (xLabels.length - 1);
    const yIncrement = graphHeight / (yLabels.length - 1);
 
    // Plot de data.
    ctx.beginPath();
    ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
 
    for (let i = 1; i < data.length; i++) 
    {
        const xPos = padding + i * xIncrement;
        const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
        ctx.lineTo(xPos, yPos);
    }
    ctx.stroke();
 
    // Teken Y labels.
    ctx.fillStyle = "black";
    ctx.textAlign = "right"; // Tekst naar rechts uitlijnen.
    ctx.textBaseline = "middle"; // Verticaal centreren.
 
    for (let i = 0; i < yLabels.length; i++) 
    {
        if (yLabels[i] !== "") 
        {
            const yPos = canvas.height - padding - i * yIncrement;
            ctx.fillText(yLabels[i], padding - 10, yPos);
        }
    }
 
    // Teken X labels.
    ctx.textAlign = "center"; // Horizontaal centreren voor X labels.
    for (let i = 0; i < xLabels.length; i++) 
    {
        if (xLabels[i] !== "") 
        {
            const xPos = padding + i * xIncrement;
            ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
        }
    }
}
else
{
    console.log("Canvas element does not exist on this page.");
}
}
 
/**
 * Functie om weergegevens op te halen en een grafiek te tekenen.
 * Deze functie haalt weergegevens op van een lokale server en tekent een lijngrafiek
 * op basis van de verkregen data.
 */
function fetchWeatherDataAndDrawChart() 
{
    // URL van de API waar de weergegevens opgehaald kunnen worden.
    const apiUrl = `http://127.0.0.1:5000/weather`;
 
    // Voer een GET-verzoek uit naar de API.
    fetch(apiUrl)
        .then(response => 
        {
            // Controleer of het verzoek succesvol was.
            if (response.ok) 
            {
                return response.json();
            }
            // Gooi een fout als het verzoek niet succesvol was.
            throw new Error('Network response was not ok.');
        })
        .then(data => 
            {
                // Verkrijg de weersvoorspelling voor de eerste 5 dagen.
                const weatherForecast = data.weather_forecast.slice(0, 5);
                // Converteer datums naar afkortingen van dagen van de week.
                const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
                // Verkrijg de maximale temperaturen.
                const temperatures = weatherForecast.map(day => day.max_temp);
             
                // Teken de lijngrafiek met de verkregen data.
                drawLineChart(dates, temperatures);
            })            
        .catch(error => 
        {
            // Log eventuele fouten tijdens het ophalen.
            console.error('There was a problem with the fetch operation:', error);
        });
}
 
/**
 * Functie om een datum (bijv. "07-02") om te zetten naar de dag van de week (bijv. "zo", "ma", etc.).
 * @param {string} dateString - De datum als string in het formaat "dd-mm".
 * @returns {string} De afkorting van de dag van de week.
 */
// function convertDateToDayOfWeek(dateString) 
// {
//     // Split de datum in dag en maand, en zet deze om naar nummers.
//     const [day, month] = dateString.split('-').map(Number);
//     // Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
//     const date = new Date(2024, month - 1, day);
//     // Verkrijg de dag van de week en zet deze om naar een afkorting.
//     const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
//     return dayOfWeek;
// }

// function convertDateToDayOfWeek(dateString) 
// {
//     // Create a date object from the dateString
//     const [year, month, day] = dateString.split("-").map(Number);
//     const date = new Date(year, month - 1, day);

//     // Array of Dutch day names
//     const dayNames = ["zo", "ma", "di", "wo", "do", "vr", "za"];

//     // Return the day name according to the date object
//     return dayNames[date.getDay()];
// }



 
/**
 * Functie om batterijdata op te halen wanneer de pagina laadt.
 * Deze functie haalt data op met Axios en verwerkt deze vervolgens.
 */
function fetchBatteryData() 
{
    // Voer een GET-verzoek uit naar de server om batterijdata op te halen.
    axios.get('http://127.0.0.1:5000')
        .then(response => 
        {
            // Verwerk de ontvangen data.
            const batteryData = response.data;
            updateBatteryData(batteryData);
        })
        .catch(error => 
        {
            // Log eventuele fouten tijdens het ophalen.
            console.error('Error fetching battery data:', error);
        });
}

 
/**
 * Functie om batterijdata op de pagina bij te werken.
 * Deze functie update de HTML met de ontvangen batterijdata.
 * @param {Array} batteryData - De ontvangen batterijdata.
 */
function updateBatteryData(batteryData) 
{
    // Check if on the specific page where the battery data should be updated
    if (window.location.pathname.endsWith('index.html')) 
    {
        // Update de data voor specifieke apparaten op basis van hun ID.
        const sensor322Element = document.getElementById('deviceNumber-322');
        const sensor256Element = document.getElementById('deviceNumber-256');
        
        if (batteryData[1].device_id === 322 && sensor322Element) 
        {
            sensor322Element.innerHTML = batteryData[1].device_id;
            document.getElementById('voltage-322').innerHTML = batteryData[1].label;
            document.getElementById('time-322').innerHTML = new Date(batteryData[1].last_seen * 1000).toLocaleTimeString();
            document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage.toFixed(2);
        }
        if (batteryData[0].device_id === 256 && sensor256Element) 
        {
            sensor256Element.innerHTML = batteryData[0].device_id;
            document.getElementById('voltage-256').innerHTML = batteryData[0].label;
            document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen * 1000).toLocaleTimeString();
            document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage.toFixed(2);
        }
    }
}


 
// Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
const apiKey = "9516081f15727d063c9e2f08454a2fe9";
const city = "Leiden";
 
// Construeer de URL voor de API-aanroep. In dit geval is het een lokale server.
const apiUrl = `http://127.0.0.1:5000/weather`;
 
// Voer een GET-verzoek uit naar de API om de weergegevens op te halen.
fetch(apiUrl)
  .then(response => 
  {
    // Controleer of de respons van de server in orde is (status code 200).
    if (response.ok) 
    {
      // Zo ja, parse de JSON uit de respons.
      return response.json();
    }
    // Zo niet, gooi een fout.
    throw new Error('Network response was not ok.');
  })
  .then(data => 
  {
    // Log de ontvangen data naar de console voor debugging.
    console.log(data);
 
    // Extraheren van de weersvoorspelling voor de eerste vijf dagen.
    const weatherForecast = data.weather_forecast.slice(0, 5);
    // Haal de dagen op waarvoor de voorspelling geldt.
    const dates = weatherForecast.map(day => day.dag);
    // Haal de maximale temperaturen op voor deze dagen.
    const temperatures = weatherForecast.map(day => day.max_temp);
 
    // Update de grafiek met de nieuwe data.
    drawLineChart(dates, temperatures);
  })
  .catch(error => 
  {
    // Log eventuele fouten tijdens het ophalen van de data.
    console.error('There was a problem with the fetch operation:', error);
  });

  function dynamischSensor()
  {
      if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/') 
      {
          const sensor1 = document.getElementById("sensor-1");
          const sensor2 = document.getElementById("sensor-2");
          
          if (sensor1 && sensor2) 
          {
              sensor1.href = `sensor.html?id=${322}`;
              sensor2.href = `sensor.html?id=${256}`;
          }
          else 
          {
              console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM.");
          }
      }
  }
  
  // Aanroepen van de functie
  dynamischSensor();
  

  function closeApplication() {
    if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) {
        window.close();
    }}

    function fetchPlantenData()
    {
        // Gebruik Axios om een GET-verzoek te versturen naar de planten endpoint.
        axios.get('http://127.0.0.1:5000/planten')
        .then(response => 
        {
            // Verwerk de ontvangen data.
            const plantenData = response.data;
            updatePlantenData(plantenData);
        })
        .catch(error => 
        {
            // Log eventuele fouten tijdens het ophalen.
            console.error('Error fetching planten data:', error);
        });
    }
    
    function getPlantIdFromUrl()
    {
        // Maak een URL-object van de huidige locatie.
        const currentUrl = new URL(window.location.href);
        // Gebruik de URLSearchParams API om de query parameters te verwerken.
        const searchParams = currentUrl.searchParams;
        // Haal de 'id' query parameter op.
        return searchParams.get('id'); // Dit zal een string retourneren of null als het niet bestaat.
    }
    
    function updatePlantenData(plantenData) 
    {
        // Verkrijg de plant ID uit de URL.
        const plantId = parseInt(getPlantIdFromUrl(), 10);
    
        // Vind de plant met die ID in de ontvangen JSON-data.
        const gevondenPlant = plantenData.find(plant => plant.id === plantId);
    
        // Update de titel van de pagina met de naam van de gevonden plant.
        if (gevondenPlant) 
        {
            document.title = gevondenPlant.plant_naam;
            document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam;
            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
        }
        else 
        {
            console.log(`Geen plant gevonden met ID ${plantId}`);
        }
    }
    
    // Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
    fetchPlantenData();