<template>
    
    <v-sheet
        width="100%"
        class="d-flex align-start justify-space-between"
    >
        <v-switch
            :true-value="1"
            :false-value="0"
            dense
            hide-details
            :label="__('Abonare la newsletter')"
            class="my-0"

            v-model="account.newsletter"
        >
        </v-switch>

        <v-radio-group 
            hide-details
            dense
            :row="false"
            :disabled="1 * account.newsletter == 0"
            class="my-0"
            
            v-model="account.locale"
        >
            <v-radio
                v-for="(item, index) in languages"
                :key="'item-' + index"
                :label="__(item.name)"
                :value="item.slug"
            >
            </v-radio>
        </v-radio-group>
    </v-sheet>
</template>

<script>
    export default {
        model: { 
            prop: "account", 
            event: "input" 
        }, 

        props: {
            account: {required: true},
        },

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

        watch: {
            'account.newsletter': function(newValue) {
                if(1 * newValue == 0)
                {
                    this.account.locale = null;
                }
                else
                {
                    if( ! this.account.locale )
                    {
                        this.account.locale = 'ro';
                    }
                }
            }
        },

        name: 'NewsletterControl',
    }
</script>