// static/js/iconManager.js

/**
 * Een eenvoudige standalone icon manager voor Material Symbols Outlined
 * Deze kan direct worden gebruikt zonder Vue
 */
window.iconManager = {
    loadedIcons: [],

    /**
     * Laadt een Material Symbols Outlined icoon als het nog niet is geladen
     * @param {string} iconName - Naam van het icoon
     * @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
     */
    loadIcon: function(iconName, options = {}) {
        if (!iconName) return;

        if (this.loadedIcons.includes(iconName)) {
            return; // Icoon is al geladen
        }

        const defaultOptions = {
            opsz: 24,
            wght: 400,
            FILL: 0,
            GRAD: 0
        };

        const opts = { ...defaultOptions, ...options };

        // Genereer unieke ID voor het stylesheet element
        const styleId = `material-symbols-${iconName}`;

        // Controleer of het stylesheet al bestaat
        if (!document.getElementById(styleId)) {
            const link = document.createElement('link');
            link.id = styleId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${iconName}`;
            document.head.appendChild(link);
            console.log(`Material Symbol geladen: ${iconName}`);

            this.loadedIcons.push(iconName);
        }
    },

    /**
     * Laadt een set van Material Symbols Outlined iconen
     * @param {Array} iconNames - Array met icoonnamen
     * @param {Object} options - Opties voor de iconen
     */
    loadIcons: function(iconNames, options = {}) {
        if (!iconNames || !Array.isArray(iconNames) || iconNames.length === 0) {
            return;
        }

        // Filter alleen iconen die nog niet zijn geladen
        const newIcons = iconNames.filter(icon => !this.loadedIcons.includes(icon));

        if (newIcons.length === 0) {
            return; // Alle iconen zijn al geladen
        }

        const defaultOptions = {
            opsz: 24,
            wght: 400,
            FILL: 0,
            GRAD: 0
        };

        const opts = { ...defaultOptions, ...options };

        // Genereer unieke ID voor het stylesheet element
        const styleId = `material-symbols-set-${newIcons.join('-')}`;

        // Controleer of het stylesheet al bestaat
        if (!document.getElementById(styleId)) {
            const link = document.createElement('link');
            link.id = styleId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${newIcons.join(',')}`;
            document.head.appendChild(link);
            console.log(`Material Symbols geladen: ${newIcons.join(', ')}`);

            // Voeg de nieuwe iconen toe aan de geladen lijst
            this.loadedIcons.push(...newIcons);
        }
    }
};

// Export de iconManager functie om te gebruiken in Vue componenten
// Dit vervangt de complexe injectie in het DynamicForm component
export { iconManager as default };

// We exporteren iconManager als default, maar houden ook de window.iconManager beschikbaar
// voor backwards compatibility met bestaande code

// Maak een Vue mixin die iconManager toevoegt aan elk component dat het nodig heeft
export const IconManagerMixin = {
    created() {
        // Check of er een formData.icon property is
        if (this.formData && this.formData.icon) {
            window.iconManager.loadIcon(this.formData.icon);
        }
    },

    // Watch voor formData.icon veranderingen
    watch: {
        'formData.icon': function(newIcon) {
            if (newIcon) {
                window.iconManager.loadIcon(newIcon);
            }
        }
    },

    // Methode om toe te voegen aan componenten
    methods: {
        loadIcon(iconName, options) {
            window.iconManager.loadIcon(iconName, options);
        },

        loadIcons(iconNames, options) {
            window.iconManager.loadIcons(iconNames, options);
        }
    }
};

// We hoeven niet langer DynamicForm te manipuleren
// omdat Vue componenten nu de IconManagerMixin kunnen gebruiken
console.log('IconManager en IconManagerMixin zijn beschikbaar voor componenten');