import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-utils.js';
import { seededShuffleChildren } from './utils/shuffle-utils.js';
import { initializeCreateStarterKitPopup } from './components/create-starterpack-popup.js';
import { loadPostwall } from './components/postwall.js';

document.addEventListener('DOMContentLoaded', async function () {
    // Starte sofort den Seitenaufbau
    initializeSite();
});

async function initializeSite() {
    await loadTemplates();

    initializeCreateStarterKitPopup();

    // Lade die Postwall
    loadPostwall();

    const container = document.getElementById('starterkit-container');
    const shuffleContainers = document.querySelectorAll('.shuffle-container');
    const seed = Date.now();

    fetch('config.json')
        .then(response => response.json())
        .then(config => {
            const starterkitFiles = config.starterpacks;

            return Promise.all(
                starterkitFiles.map(file => fetch(file).then(res => res.json()))
            );
        })
        .then(starterkits => {
            starterkits.forEach(kit => {
                const kitElement = createStarterKitElement(kit);
                container.appendChild(kitElement);
            });

            shuffleContainers.forEach(container => {
                seededShuffleChildren(container, seed);
            });

            enhanceStarterKits();
        })
        .catch(error => console.error('Fehler beim Laden der StarterKits:', error));
}

async function loadTemplates() {
    const response = await fetch('src/template/template.html');
    const templateHTML = await response.text();

    const templateContainer = document.createElement('div');
    templateContainer.innerHTML = templateHTML;
    document.body.appendChild(templateContainer);
}