function roundToTwo(num) {
    return Math.round(num*100)/100;
}

function fetchElectricData() {
    const apiUrl = '/sensor_data';
    // Fetching data from the API
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            document.getElementById('voltage').textContent = data.bus_voltage ? (roundToTwo(data.bus_voltage) + ' V') : 'XXX';
            document.getElementById('current').textContent = data.current ? (roundToTwo(data.current) + ' mA') : 'XXX';
            document.getElementById('shunt_voltage').textContent = data.current ? (roundToTwo(data.shunt_voltage) + ' mV') : 'XXX';
        })
        .catch(error => {
            console.error("There was an error fetching data from the API", error);
        });
}

function fetchTelemetryData() {
    const apiUrl = '/telemetry';
    // Fetching data from the API
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            document.getElementById('uptime').textContent = data.uptime_seconds ? (roundToTwo(data.uptime_seconds) + ' s') : 'XXX';
            document.getElementById('heap').textContent = data.heap_percent ? (roundToTwo(data.heap_percent) + ' %%') : 'XXX';
            document.getElementById('temperature').textContent = data.heap_percent ? (roundToTwo(data.temperature) + ' °C') : 'XXX';
        })
        .catch(error => {
            console.error("There was an error fetching data from the API", error);
        });
}

function fetchWaterData(gauge) {
    const apiUrl = '/water_data';
    // Fetching data from the API
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
            document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
            document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %%' || 'N/A';
            gauge.value = data.liters;
        })
        .catch(error => {
            console.error("There was an error fetching data from the API", error);
        });  
}

function fetchUpdateData(gauge) {
    const apiUrl = '/ota_update_status';
    // Fetching data from the API
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            document.getElementById('current_fw').textContent = data.current_version	 || 'N/A';
            document.getElementById('server_fw').textContent = data.new_version || 'N/A';
            if (data.update_available == true) {
                document.getElementById("update_button").style.visibility = 'visible';
            } else {
                document.getElementById("update_button").style.visibility = 'hidden';
            };
        })
        .catch(error => {
            console.error("There was an error fetching data from the API for OTA Data", error);
        });
        
}

function fetchConnectionData() {
    const apiUrl = '/network_info';
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            document.getElementById('wifi_ip').textContent = data.wifi.ip || 'N/A';
            document.getElementById('wifi_rssi').textContent = data.wifi.rssi || 'N/A';
            document.getElementById('wifi_link').textContent = data.wifi.link || 'N/A';
            document.getElementById('wifi_ssid').textContent = data.wifi.ssid || 'N/A';
            document.getElementById('eth_link').textContent = data.ethernet.link || 'N/A';
            document.getElementById('eth_ip').textContent = data.ethernet.ip || 'N/A';
            document.getElementById('eth_speed').textContent = data.ethernet.rssi || 'N/A';
        })
        .catch(error => {
            console.error("There was an error fetching data from the API", error);
        });
        
}

window.addEventListener('DOMContentLoaded', (event) => {
    var water_volume = %water_volume%;
    console.log(water_volume);
    console.log(water_volume/10);
    
    var gauge = new RadialGauge({
        renderTo: 'main_gauge',
        // width: 300,
        // height: 300,
        units: "l",
        minValue: 0,
        maxValue: water_volume,
        majorTicks: generateValueList(water_volume),
        minorTicks: 2,
        strokeTicks: true,
        highlights: [
            {
                "from": water_volume/10,
                "to": (water_volume/10)*2,
                "color": "rgba(255, 255, 0, .75)"
            },
            {
                "from": 0,
                "to": water_volume/10,
                "color": "rgba(255, 0, 50, .75)"
            }
        ],
        colorPlate: "#fff",
        borderShadowWidth: 0,
        borders: false,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear"
        }).draw();
    // URL of your API
    

    fetchWaterData(gauge);
    fetchTelemetryData();
    fetchElectricData();
    fetchConnectionData();
    fetchUpdateData();
    setInterval(function(){fetchWaterData(gauge);}, 5000);
    setInterval(fetchTelemetryData, 5000);
    setInterval(fetchElectricData, 5000);
    setInterval(fetchConnectionData, 5000);
    setInterval(fetchUpdateData, 5000);
});





function generateValueList(maxValue) {
    let interval = 10;
    let numberOfValues = Math.floor(maxValue / interval) + 1;
  
    while (numberOfValues > 10) {
      interval += 10;
      numberOfValues = Math.floor(maxValue / interval) + 1;
    }
  
    const valueList = [];
    for (let i = 0; i < numberOfValues; i++) {
      valueList.push(i * interval);
    }
  
    valueList[numberOfValues - 1] = maxValue;
  
    return valueList;
  }