<template>
    <v-menu 
        offset-y 
        transition="slide-x-transition" 
        bottom 
        left 
        tile
        v-model="isVisible"
    >
        <template v-slot:activator="{ on }">
            <v-btn 
                icon 
                rounded
                small
                class="mr-1"
                v-on="on"
            >
                <v-avatar size="32">
                    <v-img :src="$url + 'imgs/' + languages[locale].flag_icon">
                    </v-img>
                </v-avatar>
                
            </v-btn>
        </template>

        <v-card>
            <v-list>
                <v-list-item
                    v-for="(option, index) in languages"
                    :key="'option-' + index"
                    :disabled="index == locale"
                    @click="OnClick(index)"
                >
                    <v-avatar size="28">
                        <v-img :src="$url + 'imgs/' + option.flag_icon">
                        </v-img>
                    </v-avatar>

                    <span class="text-dark-blue text-body-2 px-2">
                        {{__(option.name)}}
                    </span>
                    
                    <v-icon v-if="index == locale">
                        mdi-check
                    </v-icon>
                </v-list-item>
            </v-list>
        </v-card>
    </v-menu>
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            app: {required: true},
        },

        data: () => ({
            isVisible: false,
        }),

        computed: {
            locale() {
                return this.$config.locale;
            },

            languages() {
                return this.$config.languages;
            }
        },

        methods: {
            OnClick(locale) {
                Redirect('system/set-locale/' + locale);
            }
        },
        
        name: 'LanguagePopup',
    }
</script>