<template>
    
    <v-app-bar 
        app 
        flat 
        dense 
        :color="app.appHeader.color" 
        dark
    >
        <header-drawer-icon 
            v-if="app.user 
                && !! app.menus.Drawer && (app.menus.Drawer.optionsCount > 0)
                && ( 
                    (userRoleSlug == 'sa') || 
                    (userRoleSlug == 'admin') || 
                    (userRoleSlug == 'operator') || 
                    (userRoleSlug == 'master')
                )"
            :app="app"
        />

        <div>
            <header-title 
                :app="app"
            />
        </div>

        <header-left-menu 
            v-if="!! app.menus.Headerleft && (app.menus.Headerleft.optionsCount > 0)"
            :app="app"
        />

        <v-spacer></v-spacer>

        <div class="mr-2">
            <notifications-popup
                :app="app" 
            />
        </div>
      
        <div
            v-if="hasCustomerSelector"
        >
            <customer-selector-popup 
                :app="app"
            />
        </div>

        <div
            v-if="app.appHeader.hasEmailIcon"
            class="mr-2"
        >
            <email-icon />
        </div>

        <user-popup 
            v-if="app.user && !! app.menus.Headeruserpopup && (app.menus.Headeruserpopup.optionsCount > 0)"
            :app="app"
        />
        
        <language-popup 
            v-if="hasLanguageSelector"
            :app="app"
        />

        <header-right-menu 
            v-if="!! app.menus.Headerright && (app.menus.Headerright.optionsCount > 0)"
            :app="app"
        />

    </v-app-bar>
</template>

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

        computed: {
            appHeader() {
                return this.app.appHeader;
            },

            hasCustomerSelector() {
                
                if(this.$config.platform == 'admin')
                {
                    return false;
                }

                if( ! this.app.appHeader.hasCustomerSelector )
                {
                    return false;
                }
                
                if( ! this.app.user )
                {
                    return false;
                }

                if( ! _.has(this.app.user, 'customers') )
                {
                    return false;
                }

                return this.app.user.customers.length > 0 
            },

            hasLanguageSelector() {
                return this.app.appHeader.hasLanguageSelector;
            },

            userRoleSlug() {
                if(! this.app.user )
                {
                    return null;
                }
                
                return this.app.user.role ? this.app.user.role.slug : null;
            }
        },


        components: {
            HeaderDrawerIcon: require('./DrawerIcon/HeaderDrawerIcon').default,
            HeaderTitle: require('./Title/HeaderTitle').default,
            HeaderLeftMenu: require('./LeftMenu/HeaderLeftMenu').default,
            HeaderRightMenu: require('./Rightmenu/HeaderRightMenu').default,
            UserPopup: require('./User/UserPopup').default,
            LanguagePopup: require('./Language/LanguagePopup').default,
            EmailIcon: require('./Email/EmailIcon').default,
            CustomerSelectorPopup: require('./Customer/CustomerSelectorPopup').default,
            NotificationsPopup: require('./Notifications/NotificationsPopup').default,
        },

        name: 'ApplicationHeader',
    }
</script>