import { fetchData } from './api.js';
import { parseData } from './dataHandler.js';
import { renderCharts, updateCharts } from './visualization.js';

/**
 * Verbindet Filter-Controls mit Daten-Reload und Diagrammupdate.
 * @function wireUIEvents
 * @returns {void}
 */
function wireUIEvents() {
  const sensorSelect = document.querySelector('#sensorType');
  const timeRangeSelect = document.querySelector('#timeRange');

  if (!sensorSelect || !timeRangeSelect) return;

  const handleFilterChange = async () => {
    const params = {
      sensorType: sensorSelect.value || undefined,
      timeRange: timeRangeSelect.value || undefined
    };
    const data = await fetchData(params);
    if (data) {
      const parsed = parseData(data);
      updateCharts(parsed);
    }
  };

  sensorSelect.addEventListener('change', handleFilterChange);
  timeRangeSelect.addEventListener('change', handleFilterChange);
}

/**
 * Startet die Anwendung, lädt die ersten Daten und erstellt Diagramme.
 * @function initApp
 * @returns {Promise<void>}
 */
async function initApp() {
  const appContainer = document.querySelector('#app');
  if (!appContainer) return;

  try {
    const data = await fetchData();
    const parsed = parseData(data);
    renderCharts(parsed);
    wireUIEvents();
  } catch (error) {
    console.error('Fehler beim Initialisieren der Anwendung:', error);
  }
}

window.addEventListener('load', initApp);

export { initApp, wireUIEvents };