import { fetchProfile } from './profile-utils.js';
import { createRecommendationPopup } from './popup-utils.js';

export function createStarterKitElement(kit) {
    const template = document.getElementById('starterkit-template').content.cloneNode(true);

    // Titel und Beschreibung
    const kitElement = template.querySelector('.starterkit');
    kitElement.querySelector('h3').textContent = kit.name;
    kitElement.querySelector('p').textContent = kit.description;

    // Aufteilen der Profilanzahl in zwei Zeilen
    const profileCount = kitElement.querySelector('.profile-count');
    profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;    

    // Hinzufügen des Autors mit 'created by'
    const authorLink = kitElement.querySelector('.account');
    authorLink.href = kit.author;

    fetchProfile(kit.author, { updateElement: authorLink }).then(() => {
        const avatarImage = authorLink.querySelector('.account-avatar');
        if (avatarImage) {
            authorLink.textContent = '';
            authorLink.appendChild(avatarImage);
        }
    });

    kitElement.dataset.accounts = JSON.stringify(kit.accounts);

    return kitElement;
}

export function enhanceStarterKits() {
    const starterkits = document.querySelectorAll('.starterkit');

    starterkits.forEach(kit => {
        kit.addEventListener('click', function () {
            const title = kit.querySelector('h3').textContent;
            const accounts = JSON.parse(kit.dataset.accounts || '[]');
            const popup = createRecommendationPopup(accounts, title);
            document.body.appendChild(popup);
        });
    });
}