<template>
    <v-card
        :width="width"
        color="orange"
        outlined
    >   
        <v-sheet
            color="white"
            :width="width - 2"
            class="pb-2 rounded"
        >
            <v-sheet
                class="d-flex justify-center py-2 orange lighten-5 rounded"
            >
                <user-avatar 
                    :user="user"
                    :size="64"
                />

            </v-sheet>

            <v-card-text>
                <v-sheet
                    class="d-flex justify-center"
                >
                    <div>
                        <div class="font-weight-bold text-body-1 orange--text text-center">
                            {{ user.full_name }}
                        </div>

                        <div class="text-body-2 orange--text text-center">
                            {{ user.email }}
                        </div>

                        <div class="text-body-2 orange--text text-center">
                            {{ user.phone }}
                        </div>
                        
                        <div class="text-body-2 mt-3 text-center text-caption">
                            
                            <user-active 
                                :app="app"
                                :user="user"
                                :form="null"
                            />

                            {{ __(user.active ? 'Cont activat' : 'Cont neactivat') }}

                            <span v-if="user.active">
                                {{ __('în :d', {d: ToDateTime(user.email_verified_at)}) }}
                            </span>
                        </div>

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

            <v-card-actions class="py-0 d-flex justify-space-between">
                <cs-orange-btn 
                    caption="Editează"
                    icon="mdi-pencil"
                    :disabled="changepasswordform.visible"
                    @click="OnClickEdit"
                /> 

                <cs-orange-btn 
                    caption="Schimbă parola"
                    icon="mdi-lock"
                    :disabled="form.visible"
                    @click="OnClickChangePassword"
                /> 

            </v-card-actions>
        </v-sheet>

        <user-form-menu 
            :app="app"
            :form="form"
            :withPassword="false"
            :withAvatar="true"
            :withHeader="false"
            @success="OnSuccess"
        />

        <user-change-password-form-menu 
            :app="app"
            :withHeader="false"
            @success="OnSuccessChangePassword"
        />

    </v-card>   
</template>

<script>

    export default {
        props: {
            app: {required: true},
            user: {required: true},
            width: {default: 360},
            height: {default: null},
        },

        methods: {
            OnSuccess(e) {
                this.app.LoadConfig(false); 
            },

            OnSuccessChangePassword(e) {
                this.app.menus.Headeruserpopup.options.Logout.Click();
            },

            OnClickEdit(e) {
                this.form.target = 'record';
                this.form.menu = {
                    visible: true,
                    x: e.clientX,
                    y: e.clientY,
                };

                this.form.Show(null, 'update', {
                    ...this.user,
                });
            },

            OnClickChangePassword(e) {
                this.changepasswordform.menu = {
                    visible: true,
                    x: e.clientX,
                    y: e.clientY,
                };

                this.changepasswordform.Show(null, 'change-password', {
                    ...this.user,
                });

            }
        },

        components: {
            UserAvatar: require('VUECOMP/VIEWS/Attributes/Users/UserAvatar').default,
            CsOrangeBtn: require('@CsVueComp/buttons/CsOrangeBtn').default,
        },

        mixins: [
            require('./../../mixins/myprofile.mixin'),
        ],

        name: 'ProfilePageUser',
    }
</script>