<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card tile flat :width="menu.width" :color="color + ' darken-3'">

            <v-card-title class="pa-1 white--text">
                {{ __(color == 'red' ? 'Deactivare cont' : 'Activare cont') }}. {{ user.full_name  }}
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet class="white overflow-x-hidden" :height="menu.height" 
                :class="{
                    'overflow-y-auto': !! menu.height
                }"
            >
                <v-card-text>
                    <v-sheet v-if="user.activated_at" :class="color + '--text'">

                        {{  
                            __('Sunteți sigur că doriți deactivarea contului pentru :name, rolul :rol?', {
                                name: user.full_name,
                                rol: role.name,
                            }) 
                        }}

                    </v-sheet>

                    <v-sheet v-else :class="color + '--text'">

                        {{  
                            __('Sunteți sigur că doriți activarea contului pentru :name, rolul :rol?', {
                                name: user.full_name,
                                rol: role.name,
                            }) 
                        }}

                        </v-sheet>
                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <v-sheet class="white">
                <v-card-actions>

                    <cs-btn 
                        icon="mdi-content-save"
                        caption="Da"
                        outlined
                        :color="color"
                        @click="OnClickSave"
                    />

                    <v-spacer></v-spacer>

                    <cs-btn 
                        caption="Renunță"
                        icon="mdi-close"
                        outlined
                        @click="OnClickCancel"
                    />
                </v-card-actions>
            </v-sheet>
        </v-card>
    </v-menu>
    
</template>


<script>

    import Updateuserstatus from './Requests/Updateuserstatus.request';

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

        computed: {
            color() {
                return this.user.activated_at ? 'red' : 'green'
            },

            user() {
                return this.menu.payload.user;
            },

            role() {
                return this.menu.payload.role;
            }
        },

        methods: {
            OnClickSave() {
                new Updateuserstatus(this.app)
                    .ResetData()
                    .SetData({
                        id: this.user.id,
                        status: !! this.user.activated_at ? 1 : 0,
                    })
                    .Request([
                        response => {

                            // console.log(response.payload.record);

                            this.user.email_verified_at = response.payload.record.email_verified_at;
                            this.user.activated_at = response.payload.record.activated_at;

                            this.OnClickCancel();
                        }
                    ]);
            },

            OnClickCancel() {
                this.Utilizatori.Menus.Hide(this.menu);
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CsUpdateUserStatusMenu',
    }
</script>