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 with Vue template');
        console.log('🔍 [DEBUG] Props:', {
            initialLanguage: this.initialLanguage,
            currentLanguage: this.currentLanguage,
            supportedLanguageDetails: this.supportedLanguageDetails,
            allowedLanguages: this.allowedLanguages
        });

        // 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);
            }
        }
    },

    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>
    `
};