import { parseString } from 'xml2js';
import JSONEditor from 'jsoneditor';

// Import renderer functions
import { renderAdminData } from './renderers/AdminRenderer.js';
import { renderMeasurementResults } from './renderers/MeasurementRenderer.js';

// Global configuration
const selectableLanguages = ['en', 'de', 'fr', 'es'];
let selectedLanguage = 'en';
let dccData = null;

export function initApp() {
  const appContainer = document.getElementById('app');

  // Create language selection dropdown
  const langSelect = document.createElement('select');
  selectableLanguages.forEach(lang => {
    const option = document.createElement('option');
    option.value = lang;
    option.textContent = lang;
    if (lang === selectedLanguage) option.selected = true;
    langSelect.appendChild(option);
  });
  langSelect.addEventListener('change', (e) => {
    selectedLanguage = e.target.value;
    renderAll();
  });
  appContainer.appendChild(langSelect);

  // Create containers for administrative data and measurement results
  const adminContainer = document.createElement('div');
  adminContainer.id = 'adminData';
  appContainer.appendChild(adminContainer);

  const measContainer = document.createElement('div');
  measContainer.id = 'measurementResults';
  appContainer.appendChild(measContainer);

  // Load the embedded XML file (for testing) from the data folder
  fetch('/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml')
    .then(response => response.text())
    .then(xmlText => {
      // Convert XML to JSON using xml2js
      parseString(xmlText, { explicitArray: false }, (err, result) => {
        if (err) {
          console.error('Error parsing XML:', err);
          return;
        }
        dccData = result;
        renderAll();
      });
    })
    .catch(err => console.error('Error loading XML file:', err));
}

function renderAll() {
  // Clear containers
  const adminContainer = document.getElementById('adminData');
  adminContainer.innerHTML = '';
  const measContainer = document.getElementById('measurementResults');
  measContainer.innerHTML = '';

  // Render the content if XML has been loaded and converted
  if (dccData && dccData['dcc:digitalCalibrationCertificate']) {
    const cert = dccData['dcc:digitalCalibrationCertificate'];
    if (cert['dcc:administrativeData']) {
      renderAdminData(cert['dcc:administrativeData'], selectedLanguage);
    }
    if (cert['dcc:measurementResults']) {
      renderMeasurementResults(cert['dcc:measurementResults'], selectedLanguage);
    }
  }
}