// Sample data - you can replace this with your actual dataset
const data = [
  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 },
  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 },
  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 },
  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 },
  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 },
  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 }
];

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

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