class GaugeGroup {
    constructor(nodeId, Location, gaugesCount, maxGaugeValues, dataTypes) {
        this.nodeId = nodeId;
        this.gaugesCount = gaugesCount;
        this.maxGaugeValues = maxGaugeValues; // Maximum value the gauge can display
        this.dataTypes = dataTypes; // Array of data type names for each gauge
        this.location = Location;
        // Create a new div element
        this.element = document.createElement("div");
        this.element.className = "gaugeGroup";

        // Set the HTML of the new div
        this.element.innerHTML = `
            <h2 class="groupTitle">${this.nodeId} - ${this.location}</h2>
            <div class="Node">
                ${Array(this.gaugesCount).fill().map((_, i) => `
                    <div class="Sensorvalues">
                        <div id="gaugeContainer${this.nodeId}_${i+1}" class="gaugeContainer">
                            <img src="gauge.png" class="gaugeImage">
                            <div id="gaugeValue${this.nodeId}_${i+1}" class="gaugeValue"></div>
                            <div id="needle${this.nodeId}_${i+1}" class="needle"></div>
                            <div id="gaugeText${this.nodeId}_${i+1}" class="gaugeText">0</div>
                            <div class="gaugeCover"></div>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;

        // Append the new div to the body
        document.body.appendChild(this.element);
    }

    updateGauge(gaugeId, value) {
        if (!this.maxGaugeValues || gaugeId - 1 < 0 || gaugeId - 1 >= this.maxGaugeValues.length) {
            console.error('Invalid gaugeId or maxGaugeValues:', gaugeId, this.maxGaugeValues);
            return;
        }
        const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`);
        const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`);
        const maxGaugeValue = this.maxGaugeValues[gaugeId - 1]; // Get the maximum value for this gauge
        const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)

        needle.style.transform = `rotate(${rotationDegree}deg)`;
        gaugeText.textContent = `${this.dataTypes[gaugeId - 1]}: ${value}`; // Update the text with data type
    }
}