<script
    lang="ts"
    setup
>
    import { useUiStore } from 'src/stores/ui-store';
    import type { MessageLanguages } from 'src/boot/i18n';

    const ui_store = useUiStore();

    const setDisplayLanguage = (locale: MessageLanguages) => {
        if (ui_store.user_preferences !== undefined) {
            ui_store.user_preferences.display_language = locale;
        }
    }    
</script>

<template>
    <q-list
        dense
        class="full-width"
        :class="ui_store.is_mobile_mode ? 'column' : 'row'"
    >
        <q-item
            v-for="locale in $i18n.availableLocales"
            :key="locale"
            clickable
            dense
            v-ripple
            class="col rounded-5 q-ma-sm shadow-4"
            :class="locale === $i18n.locale ? 'bg-accent text-white text-weight-bolder' : ''"
            @click="setDisplayLanguage(locale as MessageLanguages)"
        >
            <q-item-section avatar>
                <q-img :src="`src/assets/${locale}.png`"/>
            </q-item-section>

            <q-item-section class="text-uppercase justify-center">
                <q-item-label> {{ $t(`profile.preferences.${locale}`) }}</q-item-label>
            </q-item-section>

            <q-item-section side>
                <q-icon
                    v-if="locale === $i18n.locale"
                    name="check"
                    color="white"
                />
            </q-item-section>
        </q-item>
    </q-list>
</template>