<template>
    <div class="nav-item dropdown no-arrow">
        <a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" @click="onClick">
            <span class="badge badge-danger badge-counter">{{countNotificationsUnread}}</span>
            <i class="fas fa-bell fa-fw" style="color: #ffffff;"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-list animated--grow-in" :class="[{ showNotifications: 'show' }]">
            <h6 class="dropdown-header" style="background: #5d6270;">Notifications (placeholder)</h6>
            <a class="dropdown-item d-flex align-items-center" href="#" v-for="(message, indexNotifications) of notificationList" :key="indexNotifications">
                <div class="mr-3">
                    <div class="bg-primary icon-circle"><i class="fas fa-file-alt text-white"></i></div>
                </div>
                <div><span class="small text-gray-500">{{message.date}}</span>
                    <p>{{message.title}}</p>
                    <p>{{message.message}}</p>
                </div>
            </a>
            <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
        </div>
    </div>
</template>
<script lang="ts">
import { MessageNotification } from "@/domain/models/notifications/MessageNotification.interface";
import { NotificationService } from "@/domain/services/Notification.service";
export default {
    name: 'Notifications',
    data: () => {
        return {
            eventSource: EventSource,
            countNotifications: 0,
            notifications: [],
            showNotifications: false,
            localStorage: Storage,
            notificationService: new NotificationService(),
        }
    },
    async mounted(){
        console.log('test');
        this.notificationService.getMessagesFromLocalStorage();
        this.countNotifications = (this.notifications)? this.notifications.length : 0;
        this.connectToSSE();
        this.localStorage = window.localStorage;
    },
    methods:{
        connectToSSE(){
            this.eventSource = new EventSource(process.env.VUE_APP_ROOT_API + '/sse/alert/');
            this.eventSource.onmessage = ( ev: any) => {
                this.countNotifications++;
                let message: MessageNotification;
                message = JSON.parse(ev.data);
                message.id = ((this.notifications)? this.notifications.length : 0) + 1;
                let date = new Date();
                message.viewed = false;
                message.date = date.toDateString();
                this.notifications.push(message);
                this.countNotifications++;
                this.notificationService.saveMessagesToLocalStorage();
            }
        },
        onClick(){
            this.showNotifications = !this.showNotifications;
            this.notifications.forEach((element: MessageNotification) => {
                element.viewed = true;
            });
            this.notificationService.saveMessagesToLocalStorage();
        },
        // saveMessagesToLocalStorage(){
        //     window.localStorage.setItem('notifications', JSON.stringify(this.notifications));
        // },
        // getMessagesFromLocalStorage(){
        //     let notificationsJson = window.localStorage.getItem('notifications');
        //     this.notifications = (notificationsJson) ? JSON.parse(notificationsJson) : [];
        // }
    },
    computed:{
        notificationList(){
            return (this.notifications) ? this.notifications.sort((itemA: MessageNotification, itemB: MessageNotification) => { return ( itemB.id - itemA.id )}).slice(0, 5) : [];
        },
        countNotificationsUnread(){
            return (this.notifications) ? this.notifications.filter((item: MessageNotification) =>  item.viewed == false).length : 0;
        }
        
    }
}
</script>