<script setup lang="ts">
import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'

import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import { computed } from 'vue'

const { t, locale } = useI18n()
const store = useStore()

const modalName = 'languages'

const isOpen = computed({
  get() {
    return store.state.ui.modalsOpen.has(modalName);
  },
  set(value) {
    store.commit('ui/setModal', [modalName, value]);
  }
})

</script>

<template>
  <Modal overPopover
    :title="t('components.common.UserMenu.label.language')"
    v-model="isOpen"
  >
    <Layout columns :column-width="140">
      <Button ghost thin
        v-for="(language, key) in SUPPORTED_LOCALES"
        width="full"
        align-text="left"
        :aria-pressed="key===locale"
        :key="key"
        @click="setI18nLanguage(key)"
      >
        {{ language }}
      </Button>
    </Layout>
  </Modal>
</template>

<style module>
  .description {
    font-size: 0.875em;
  }
</style>
