// static/js/components/MaterialIconManager.js

/**
 * Een hulpklasse om Material Symbols Outlined iconen te beheren
 * en dynamisch toe te voegen aan de pagina indien nodig.
 */
export const MaterialIconManager = {
    name: 'MaterialIconManager',
    data() {
        return {
            loadedIconSets: [],
            defaultOptions: {
                opsz: 24,   // Optimale grootte: 24px
                wght: 400,  // Gewicht: normaal
                FILL: 0,    // Vulling: niet gevuld
                GRAD: 0     // Kleurverloop: geen
            }
        };
    },
    methods: {
        /**
         * Zorgt ervoor dat de Material Symbols Outlined stijlbladen zijn geladen
         * @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
         * @param {Array} iconNames - Optionele lijst met specifieke iconen om te laden
         */
        ensureIconsLoaded(options = {}, iconNames = []) {
            const opts = { ...this.defaultOptions, ...options };
            const styleUrl = this.buildStyleUrl(opts, iconNames);

            // Controleer of deze specifieke set al is geladen
            if (!this.loadedIconSets.includes(styleUrl)) {
                this.loadStylesheet(styleUrl);
                this.loadedIconSets.push(styleUrl);
            }
        },

        /**
         * Bouwt de URL voor het stijlblad
         */
        buildStyleUrl(options, iconNames = []) {
            let url = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${options.opsz},${options.wght},${options.FILL},${options.GRAD}`;

            // Voeg specifieke iconNames toe als deze zijn opgegeven
            if (iconNames.length > 0) {
                url += `&icon_names=${iconNames.join(',')}`;
            }

            return url;
        },

        /**
         * Laadt een stijlblad dynamisch
         */
        loadStylesheet(url) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = url;
            document.head.appendChild(link);
            console.log(`Material Symbols Outlined geladen: ${url}`);
        }
    }
};

// Singleton instantie om te gebruiken in de hele applicatie
export const iconManager = new Vue(MaterialIconManager);