export const LanguageSelector = {
    name: 'LanguageSelector',
    props: {
        initialLanguage: {
            type: String,
            default: 'nl'
        },
        currentLanguage: {
            type: String,
            default: null
        },
        supportedLanguageDetails: {
            type: Object,
            default: () => ({})
        },
        allowedLanguages: {
            type: Array,
            default: () => ['nl', 'en', 'fr', 'de']
        },
    },
    data() {
        const startLanguage = this.currentLanguage || this.initialLanguage;
        return {
            selectedLanguage: startLanguage,
            internalCurrentLanguage: startLanguage
        };
    },
    mounted() {
        // console.log('🔍 [DEBUG] LanguageSelector mounted');
        // console.log('🔍 [DEBUG] Props:', {
        //     initialLanguage: this.initialLanguage,
        //     currentLanguage: this.currentLanguage,
        //     supportedLanguageDetails: this.supportedLanguageDetails,
        //     allowedLanguages: this.allowedLanguages
        // });

        // Render the component
        this.renderComponent();

        // Emit initial language
        this.$emit('language-changed', this.selectedLanguage);

        // DOM event
        const event = new CustomEvent('vue:language-changed', {
            detail: { language: this.selectedLanguage }
        });
        document.dispatchEvent(event);
    },
    methods: {
        getAvailableLanguages() {
            const languages = [];
            const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
                ? this.allowedLanguages
                : ['nl', 'en', 'fr', 'de'];

            if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
                for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
                    const isoCode = langDetails['iso 639-1'];
                    if (languagesToUse.includes(isoCode)) {
                        languages.push({
                            code: isoCode,
                            name: langName,
                            flag: langDetails.flag || ''
                        });
                    }
                }
            } else {
                const defaultLanguages = {
                    'nl': { name: 'Nederlands', flag: '🇳🇱' },
                    'en': { name: 'English', flag: '🇬🇧' },
                    'fr': { name: 'Français', flag: '🇫🇷' },
                    'de': { name: 'Deutsch', flag: '🇩🇪' }
                };

                languagesToUse.forEach(code => {
                    if (defaultLanguages[code]) {
                        languages.push({
                            code: code,
                            name: defaultLanguages[code].name,
                            flag: defaultLanguages[code].flag
                        });
                    }
                });
            }

            return languages;
        },

        changeLanguage(languageCode) {
            console.log(`LanguageSelector: changeLanguage called with ${languageCode}`);

            if (this.internalCurrentLanguage !== languageCode) {
                this.internalCurrentLanguage = languageCode;
                this.selectedLanguage = languageCode;

                // Vue component emit
                this.$emit('language-changed', languageCode);

                // DOM event
                const event = new CustomEvent('vue:language-changed', {
                    detail: { language: languageCode }
                });
                document.dispatchEvent(event);
            }
        },

            renderComponent() {
                // We gaan direct de container manipuleren
                const container = document.getElementById('language-selector-container');
                if (!container) {
                    console.error('Container niet gevonden voor LanguageSelector');
                    return;
                }

                const availableLanguages = this.getAvailableLanguages();
                // console.log('🔍 [DEBUG] Available languages:', availableLanguages);

                const optionsHtml = availableLanguages.map(lang =>
                    `<option value="${lang.code}" ${lang.code === this.selectedLanguage ? 'selected' : ''}>${lang.flag} ${lang.name}</option>`
                ).join('');

                container.innerHTML = `
                    <div class="language-selector">
                        <label for="language-select">Taal / Language:</label>
                        <div class="select-wrapper">
                            <select id="language-select" class="language-select">
                                ${optionsHtml}
                            </select>
                        </div>
                    </div>
                `;

                // Add event listener
                const selectElement = container.querySelector('#language-select');
                if (selectElement) {
                    selectElement.addEventListener('change', (e) => {
                        this.changeLanguage(e.target.value);
                    });
                }

                // console.log('🔍 [DEBUG] Component rendered successfully');
            }
    },

    // Stap 1: Ondersteun zowel template-based rendering als manual rendering
    // Door beide methoden te ondersteunen, werkt het component in beide scenario's
    template: `
        <div class="language-selector">
            <label for="language-select">Taal / Language:</label>
            <div class="select-wrapper">
                <select id="language-select" class="language-select" v-model="selectedLanguage" @change="changeLanguage(selectedLanguage)">
                    <option v-for="lang in getAvailableLanguages()" :key="lang.code" :value="lang.code">{{ lang.flag }} {{ lang.name }}</option>
                </select>
            </div>
        </div>
    `,

    // Minimale render functie als fallback
    render() {
        return document.createElement('div');
    }
};