<template>
    <app-navbar :logo-url="urlGenerator(logo)"
                :user="user.loggedInUser"
                :selected-language="userLanguage"
                :language-data="languageList"
                notification-component="app-custom-notification-dropdown"
                :notificationData="notifications.data"
                :profile-data="filterProfileData"
                :show-identifier="!!notifications.total_unread"
                :all-notification-url="urlGenerator('/notification/list')"
                :total-unread="notifications.total"
                @clicked="readNotification"
                @loadNotifications="loadNotification"/>
</template>

<script>
    import {mapActions} from "vuex";
    import AppFunction from "../../../core/helpers/app/AppFunction";
    import {axiosPost, urlGenerator} from "../../helpers/AxiosHelper";
    import { mapGetters } from 'vuex'
    import {UserMixin} from "../views/Auth/Mixins/UserMixin";

    export default {
        name : 'DashboardNavbar',
        mixins: [UserMixin],
        props: {
            profileData: {},
            logo: {
                type: String,
                default: AppFunction.getAppUrl('images/icon.png')
            }
        },
        data(){
            return{
                urlGenerator,
            }
        },
        created() {
        },
        computed: {
            languageList() {
                return this.$store.state.language.languages
            },
            notifications() {
                return this.$store.getters.getFormattedNotifications
            },
            userLanguage() {
                return window.localStorage.getItem('app-language').toUpperCase()
            },
            ...mapGetters({ settings: 'settings' }),
            filterProfileData(){
                return this.profileData.filter(item => item.length !== 0);
            }
        },

        methods: {
            ...mapActions([
                'getNotifications'
            ]),
            readNotification(notification) {
                axiosPost(`admin/user/notifications/mark-as-read/${notification.id}`).then(({data}) => {
                    if (data.data.url) {
                        window.location = data.data.url;
                    }
                    this.getNotifications();
                });
            },
            loadNotification(){
                if(this.notifications?.next_page_url){
                    this.$store.dispatch('getNotifications', Number(this.notifications.current_page) + 1);
                }
            }
        }
    }
</script>
