// Sample data - you can replace this with your actual dataset
const data = [];
processor = new DataProcessor();
dateStart='2024-03-27%2011:47:11'
dateEnd="2024-03-27%2011:47:11"

// 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 };
}

// Function to ceate filter container and all the input elements
function createFilterContainer() {
  // 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("temperature", "Temperature");
  const humidityCheckbox = createCheckBox("humidity", "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 = new Date(document.getElementById("start-date").value);
    const endDate = new Date(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(checkbox.checkbox.id);
      }
    });

    const filteredData = filterData(
      data,
      startDate,
      endDate,
      selectedNodes,
      selectedFields
    );
    console.log(filteredData);
  });

  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("input");
  nodeInput.setAttribute("type", "text");
  nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
  nodeInput.setAttribute("id", "node-input");
  nodeInput.setAttribute("class", "input-field");

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

  container.appendChild(filterButton);

  document.body.appendChild(container);
}

// Get request to fetch data from the server
function fetchData() {
  fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then((data) => {
      createFilterContainer();
      processor.update(data);
      processor.makeGraph();
      processor.updateGraph(dateStart, dateEnd);
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}

fetchData();