// Sample data - you can replace this with your actual dataset
const data = [];
processor = new DataProcessor();
let link;
nodeDataArray = {};

// Function to create checkbox with label
function createCheckBox(id, label) {
  const checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("id", id);
  checkbox.setAttribute("class", "checkbox");

  const checkboxLabel = document.createElement("label");
  checkboxLabel.setAttribute("for", id);
  checkboxLabel.textContent = label;

  return { checkbox, checkboxLabel };
}
  fetch("http://145.92.8.114/getNodeInfo?macAdress=*")
    .then(response => {
      if (!response.ok) {
          throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      handleData(data);
    })
  
function handleData(JSONdata) {
  select = document.getElementById('node-input');

  console.log(JSONdata);
  for (var i = 0; i < JSONdata.length; i++) {
    console.log(JSONdata[i]);
    console.log(option)
    var node = JSONdata[i].NodeID;
    var name = JSONdata[i].Name;
    var location = JSONdata[i].Location;
    nodeDataArray[node] = { name: name, location: location };
    // Create new option element
    var option = document.createElement('option');

    // Set the value of the option
    option.value = node;

    // Set the text of the option
    option.text = name;

    // Add the option to the select
    select.add(option);
  }
}
// Create HTML input elements for user input
const container = document.createElement("div");
container.setAttribute("class", "container");

const dataTypesContainer = document.createElement("div");
dataTypesContainer.setAttribute("class", "data-types");

const temperatureCheckbox = createCheckBox("Temp", "Temperature");
const humidityCheckbox = createCheckBox("Humi", "Humidity");
const eco2Checkbox = createCheckBox("eCO2", "eCO2");
const tvocCheckbox = createCheckBox("TVOC", "TVOC");

dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
dataTypesContainer.appendChild(humidityCheckbox.checkbox);
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
container.appendChild(dataTypesContainer);

const filterButton = document.createElement("button");
filterButton.textContent = "Filter Data";
filterButton.setAttribute("class", "filter-button");
filterButton.addEventListener("click", () => {
  const startDate = document.getElementById("start-date").value
  const endDate = document.getElementById("end-date").value
  const selectedNodes = document
    .getElementById("node-input")
    .value.split(",")
    .map((node) => node.trim());

  const selectedFields = [];
  const checkboxes = [
    temperatureCheckbox,
    humidityCheckbox,
    eco2Checkbox,
    tvocCheckbox
  ];

  checkboxes.forEach((checkbox) => {
    if (checkbox.checkbox.checked) {
      selectedFields.push(String(checkbox.checkbox.id));
    }
  });

  let selectedFieldsString = selectedFields.map(String);

  let formattedString = '(' + selectedFieldsString.map(item => `'${item}'`).join(', ') + ')';

  const filteredData = [
    startDate,
    endDate,
    selectedNodes,
    formattedString
  ];
  
  console.log(filteredData);
  console.log(startDate, endDate, selectedNodes);

  generateLink(startDate, endDate, selectedNodes, formattedString);
  fetchData();
});

const dateFilter = document.createElement("div");
dateFilter.setAttribute("class", "date-filter");

const startDateInput = document.createElement("input");
startDateInput.setAttribute("type", "datetime-local");
startDateInput.setAttribute("id", "start-date");
startDateInput.setAttribute("class", "input-field");

const endDateInput = document.createElement("input");
endDateInput.setAttribute("type", "datetime-local");
endDateInput.setAttribute("id", "end-date");
endDateInput.setAttribute("class", "input-field");

dateFilter.appendChild(startDateInput);
dateFilter.appendChild(endDateInput);
container.appendChild(dateFilter);

const nodeFilter = document.createElement("div");
nodeFilter.setAttribute("class", "node-filter");

const nodeInput = document.createElement("select");
nodeInput.setAttribute("type", "select");
nodeInput.setAttribute("placeholder", "Enter Node Name (* for all)");
nodeInput.setAttribute("id", "node-input");

nodeFilter.appendChild(nodeInput);
container.appendChild(nodeFilter);

container.appendChild(filterButton);

document.body.appendChild(container);

// Function to get the link for the get request
function generateLink(dateStart, dateEnd, node, dataTypes) {
  const baseUrl = 'http://145.92.8.114/getMeasurements';
  const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20');
  const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20');

  link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataType=${dataTypes}`;

  console.log(link);
}
processor.makeGraph();
// Get request to fetch data from the server
function fetchData() {
  fetch(link)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then((data) => {
      processor.update(data);
      processor.updateGraph();
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}