<template>
    <div class="flex">
        <select v-model="$i18n.locale" @change="onChange()" class="my-auto p-0 pr-9 bg-transparent border-0" :selected="$i18n.locale">
            <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
                {{ names[i] }}
            </option>
        </select>
    </div>
</template>

<script lang="ts">
export default {
    setup() {
        return {
            langs: ['en-US', 'es-ES', 'nl-NL', 'pt-PT'],
            names: ['English', 'Español', 'Nederlands', 'Português']
        }
    },
    mounted() {
        const savedLocale = localStorage.getItem("language")
        if (savedLocale != null && this.langs.includes(savedLocale)) {
            this.$i18n.locale = savedLocale
        }
    },
    methods: {
        onChange() {
            localStorage.setItem("language", this.$i18n.locale)
            window.location.reload()
        }
    }
}
</script>