const sensorData = {};
let intervalDelay = 5000;
// Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws");
let liveGraphs = [];

function openConnection() {
  // Open connection
  socket.addEventListener("open", (event) => {
    console.log("Connected to the WebSocket server");
  });

  // Error handling
  socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
    // Attempt to reconnect
    setTimeout(openConnection, 1000); // Retry after 1 second
  });

  // Message handling
  socket.addEventListener("message", (event) => {
    try {
      const jsonData = JSON.parse(event.data);
      // Use the parsed JSON data as needed
      handleIncomingData(jsonData);

  } catch (error) {
      console.error("Error parsing JSON:", error);
  }
  });

  // Close handling
  socket.addEventListener('close', (event) => {
    console.log('Connection closed');
    // Attempt to reconnect
    setTimeout(openConnection, 1000); // Retry after 1 second
  });
  console.log("Connected to the WebSocket server");
}

openConnection();

function handleIncomingData(data) {
  nodeNumber = data.node;
  temperature = data.Temp;
  humidity = data.Humi;
  CO2 = data.eCO2;
  TVOC = data.TVOC;

  processNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
}

function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
  // Initialize the array for this node if it doesn't exist yet
  if (!sensorData[nodeNumber]) {
    sensorData[nodeNumber] = [];
  }

  // Push the new data onto the array for this node
  sensorData[nodeNumber].push({
    'node': nodeNumber,
    'temp': temperature,
    'humi': humidity,
    'CO2': CO2,
    'TVOC': TVOC,
  });

  // updateNodeData(node, temperature, humidity, lightIntensity)
  updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);

  // Log the array for this node
  console.log(sensorData[nodeNumber]);

  // If the array for this node has more than 10 elements, remove the oldest one
  if (sensorData[nodeNumber].length >= 10) {
    sensorData[nodeNumber].shift();
  }
}

//function for making the html elements for the following html code
function nodeData(data, node) {
  let nodeData = document.createElement("div");
  nodeData.innerHTML = data;
  // nodeData.setAttribute("id", "node" + node);
  document.body.appendChild(nodeData);
  // console.log("Hello World");
}

function createNodeData(node) {
  // Create main div
  var nodeData = document.createElement("div");
  nodeData.className = "nodeData";

  // Create flex-NodeData div
  var flexNodeData = document.createElement("div");
  flexNodeData.className = "flex-NodeData";

  // Create p element
  var pNode = document.createElement("p");
  pNode.textContent = "Node " + node;

  // Append p to flex-NodeData
  flexNodeData.appendChild(pNode);

  // Create flex-LiveData div
  var flexLiveData = document.createElement("div");
  flexLiveData.className = "flex-LiveData";

  // Create data divs (Temperature, Humidity, Light Intensity)
  var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
  var ids = ["temperature", "humidity", "CO2", "TVOC"];
  var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];

  for (var i = 0; i < dataTypes.length; i++) {
      var dataDiv = document.createElement("div");

      var dataTypeDiv = document.createElement("div");
      dataTypeDiv.textContent = dataTypes[i] + ": ";

      var pElement = document.createElement("p");
      pElement.id = ids[i] + node;
      pElement.textContent = "Not connected";

      dataTypeDiv.appendChild(pElement);
      dataDiv.appendChild(dataTypeDiv);

      var statusElement = document.createElement("div");
      statusElement.className = "statusElement";

      var statusText = document.createElement("p");
      statusText.className = "statusText";
      statusText.id = statusIds[i];
      statusText.textContent = "Not connected";

      statusElement.appendChild(statusText);
      dataDiv.appendChild(statusElement);

      flexLiveData.appendChild(dataDiv);
  }

  // Append flex-LiveData to flex-NodeData
  flexNodeData.appendChild(flexLiveData);

  // Create flex-graph div
  var flexGraph = document.createElement("div");
  flexGraph.className = "flex-graph";

  var graphDiv = document.createElement("div");

  var graphP = document.createElement("p");
  graphP.textContent = "Live graph:";

  var liveGraph = document.createElement("div");
  liveGraph.id = "liveGraph" + node;

  graphDiv.appendChild(graphP);
  graphDiv.appendChild(liveGraph);
  flexGraph.appendChild(graphDiv);

  // Append flex-graph to flex-NodeData
  flexNodeData.appendChild(flexGraph);

  // Append flex-NodeData to main div
  nodeData.appendChild(flexNodeData);

  // Check if nodeDataLocation element exists
  var nodeDataLocation = document.getElementById("nodeDataLocation");
  if (nodeDataLocation) {
    // Append main div to nodeDataLocation
    nodeDataLocation.appendChild(nodeData);
  } else {
    console.error("Element with ID 'nodeDataLocation' does not exist.");
  }
}

function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
  // Update the temperature, humidity and light intensity values
  document.getElementById("temperature" + node).textContent = temperature;
  document.getElementById("humidity" + node).textContent = humidity;
  document.getElementById("CO2" + node).textContent = eCO2;
  document.getElementById("TVOC" + node).textContent = TVOC;

  // Update the status text
  document.getElementById("tempStatus").textContent = "Connected";
  document.getElementById("humidStatus").textContent = "Connected";
  document.getElementById("CO2Status").textContent = "Connected";
  document.getElementById("TVOCStatus").textContent = "Connected";

  // Update the graph
  liveGraphs[node - 1].updateData(temperature, humidity, eCO2, TVOC);
  liveGraphs[node - 1].updateGraph();
}

// Call the function to create the HTML structure
createNodeData(1);
createNodeData(2);
createNodeData(3);
createNodeData(4);

// Create a new liveGraph object
liveGraphs.push(new liveGraph(1));

// make the graphs
liveGraphs.forEach((graph) => {
  graph.makeGraph();
});