<template>
    <nav
        id="pdc-topbar"
        :style="{
        '--hover-color': hoverColor,
        '--text-color': textColor,
    }"
    >
        <div class="top-bar-container">
            <TopbarSkeleton v-if="loading" />
            <template v-else>
                <template>
                    <slot name="topbar-container" v-if="$slots['topbar-container']" />
                    <template v-else>
                        <div class="collapse-menu-mobile" @click="toggleMenu">
                            <slot name="collapse-btn" />
                        </div>
                        <b class="topbar-title fw-700">
                            <slot name="topbar-title" v-if="$slots['topbar-title']" />
                            <template v-else> {{ pageTitle }} </template>
                        </b>
                        <portal-target name="topbar-portal" class="topbar-portal" />
                    </template>

                    <div class="right-side">
                       
                        <slot name="topbar-dropdown" v-if="$slots['topbar-dropdown']" />
                        <template v-else>
                            <el-dropdown
                                :class="`btn-link ${opened_dropdown ? 'opened' : ''}`"
                                trigger="click"
                                @visible-change="(val) => (opened_dropdown = val)"
                            >
                                <span class="el-dropdown-link font-family-montserrat fw-500">
                                    <div
                                        v-if="profileImage"
                                        class="avatar-round"
                                        :style="{
                                        '--profile-image': `url(${profileImage})`,
                                    }"
                                    />
                                    <b>Olá, {{ firstName }}</b>
                                    <i class="el-icon-arrow-down el-icon--right" />
                                </span>
                                <el-dropdown-menu
                                    slot="dropdown"
                                    :style="{
                                    '--hover-color': hoverColor,
                                    '--text-color': textColor,
                                }"
                                >
                                    <el-dropdown-item class="topbar-item">
                                        <span @click="clickItem('profile')" class="font-family-montserrat fw-500">
                                            Meus dados
                                        </span>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isAdmin" class="topbar-item">
                                        <span @click="clickItem('admin')" class="font-family-montserrat fw-500">
                                            Administração
                                        </span>
                                    </el-dropdown-item>
                                    
                                    <el-dropdown-item class="topbar-item">
                                        <span
                                            @click="
                                            openExternal(
                                                'https://conteudo.quartzolit.weber/biblioteca-webinars'
                                            )
                                        "
                                            class="font-family-montserrat fw-500"
                                        >
                                            Webinars
                                        </span>
                                    </el-dropdown-item>
                                    <!-- <el-dropdown-item v-if="show_chiligum"  class="topbar-item">
                                        <span
                                            @click="
                                                openExternal(
                                                    'https://saintgobain.chiligum.com.br/'
                                                )
                                            "
                                            class="font-family-montserrat fw-500"
                                        >
                                            Experiência SG
                                        </span>
                                    </el-dropdown-item> -->
                                    <el-dropdown-item class="topbar-item">
                                        <span @click="clickItem('exit')" class="font-family-montserrat fw-500"> Sair </span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </div>
                </template>
            </template>
        </div>
    </nav>
</template>
<script>
    import Vue from 'vue';
    import { Dropdown, DropdownItem, DropdownMenu } from 'element-ui';
    Vue.component(Dropdown.name, Dropdown);
    Vue.component(DropdownItem.name, DropdownItem);
    Vue.component(DropdownMenu.name, DropdownMenu);
    import TopbarSkeleton from './TopbarSkeleton.vue';
    export default {
        name: 'Topbar',
        props: {
            show_help_btn: Boolean,
            loading: {
                type: Boolean,
                default: false,
            },
            pageTitle: {
                type: String,
                default: '',
            },
            profileImage: {
                type: String,
                default: null,
            },
            firstName: {
                type: String,
                default: '',
            },
            isAdmin: {
                type: Boolean,
                default: false,
            },
            hoverColor: {
                type: String,
                default: '#DED9FF',
            },
            textColor: {
                type: String,
                default: '#495057',
            },
        },
        components: {
            TopbarSkeleton,
        },
        data() {
            return {
                opened_dropdown: false,
            };
        },
        methods: {
            toggleMenu() {
                this.$emit('toggleMenu');
            },
            clickItem(item) {
                this.$emit('click-item', item);
            },
            openExternal(link) {
                window.open(link, '_blank');
            },
        },
    };
</script>
<style lang="scss">
    @import './styles.scss';
</style>
