<template>
    <v-menu
        v-model="visible"
        :close-on-content-click="false"
        :nudge-width="200"
        offset-y 
        transition="slide-x-transition" 
        bottom 
        left 
        tile
        :max-width="500"
    >
        <template #activator="{ on: onMenu }">
            <v-tooltip 
                bottom 
                color="bg-dark-blue"
                :disabled="visible"
            >
                <template #activator="{ on: onTooltip }">
                    <v-hover v-slot="{ hover }">
                        <v-btn 
                            v-on="{...onMenu, ...onTooltip}"
                            icon 
                            class="header-btn mr-1"
                            :class="{
                                'bg-orange': hover,
                            }"
                        >
                            <v-badge
                                :content="notifications.length"
                                :value="notifications.length"
                                color="red"
                                overlap
                            >
                                <v-icon>mdi-bell</v-icon>
                            </v-badge>
                        </v-btn>
                    </v-hover>
                </template>
                <span class="text-caption">
                    {{ __('Notificările mele') }}
                </span>
            </v-tooltip>
        </template>

        <v-card>
            <v-sheet 
                :height="app.height * 0.75" 
                width="480" 
                class="overflow-y-auto"  
                v-if="!! notifications.length"
            >
                <v-list>
                    <notifications-popup-item 
                        v-for="(notification, index) in notifications"
                        :key="'notification-' + index"
                        :notification="notification"
                        @item-click="visible = false"
                    />
                </v-list>
            </v-sheet>

            <cs-centered-alert
                v-else
                height="256" 
                width="256" 
                message="Nu aveți notificări"
            />

            <v-card-actions>
                <cs-orange-btn 
                    caption="Toate notificările mele"
                    icon="mdi-chevron-right"
                    :click="OnClickVeziNotificarile"
                    v-if="!! notifications.length"
                />
                
                <v-spacer></v-spacer>

                <cs-btn-cancel 
                    :click="() => visible = false"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {
                required: true
            },
        },

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

        computed: {

            notifications() {
                return this.app.dataSession.Customernotifications.items;
            },
        },

        methods: {
            OnClickVeziNotificarile() {
            }
        },

        created() {
            this.app.LoadMyNotifications();
        },

        components: {
            NotificationsPopupItem: require('./NotificationsPopupItem').default,
            CsOrangeBtn: require('@CsVueComp/buttons/CsOrangeBtn').default,
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default,
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'NotificationsPopup',
    }
</script>