<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', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR'],
      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>
