export const LanguageSelector = {
    name: 'LanguageSelector',
    props: {
        initialLanguage: {
            type: String,
            default: 'nl'
        },
        supportedLanguageDetails: {
            type: Object,
            default: () => ({})
        },
        allowedLanguages: {
            type: Array,
            default: () => ['nl', 'en', 'fr', 'de']
        }
    },
    computed: {
        availableLanguages() {
            // Maak een array van taalobjecten op basis van de toegestane talen
            // en de ondersteunde taaldetails
            const languages = [];

            // Als er geen toegestane talen zijn of de lijst is leeg, gebruik een standaardlijst
            const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0) 
                ? this.allowedLanguages 
                : ['nl', 'en', 'fr', 'de'];

            // Loop door alle ondersteunde taaldetails
            if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
                // Vind talen die overeenkomen met toegestane taalcodes
                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 {
                // Fallback als er geen taaldetails beschikbaar zijn
                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].code,
                            flag: defaultLanguages[code].flag
                        });
                    }
                });
            }

            console.log('LanguageSelector: availableLanguages computed:', languages);
            return languages;
        }
    },
    emits: ['language-changed'],
    data() {
        return {
            selectedLanguage: this.initialLanguage,
            currentLanguage: this.initialLanguage
        };
    },
    mounted() {
        console.log('LanguageSelector mounted with:', {
            initialLanguage: this.initialLanguage,
            selectedLanguage: this.selectedLanguage,
            availableLanguages: this.availableLanguages
        });

        // Stuur het language-changed event uit met de initiële taal
        console.log(`LanguageSelector: Emitting language-changed event for initial language ${this.initialLanguage}`);
        this.$emit('language-changed', this.initialLanguage);
    },
    methods: {
        changeLanguage(languageCode) {
            console.log(`LanguageSelector: changeLanguage called with ${languageCode}, current: ${this.currentLanguage}`);

            if (this.currentLanguage !== languageCode) {
                console.log(`LanguageSelector: Emitting language-changed event for ${languageCode}`);
                this.currentLanguage = languageCode;
                this.$emit('language-changed', languageCode);
            } else {
                console.log(`LanguageSelector: No change needed, already ${languageCode}`);
            }
        }
    },
    template: `
        <div class="language-selector">
            <label for="language-select">Taal / Language:</label>
            <div class="select-wrapper">
                <select 
                    id="language-select" 
                    v-model="selectedLanguage" 
                    @change="changeLanguage(selectedLanguage); currentLanguage = selectedLanguage"
                    class="language-select"
                >
                    <option 
                        v-for="lang in availableLanguages" 
                        :key="lang.code" 
                        :value="lang.code"
                    >
                        {{ lang.flag }} {{ lang.name }}
                    </option>
                </select>
            </div>
        </div>
    `
};