<template>
    <div id="sidebar-component">
        <el-menu :default-active="active" :collapse="collapsed" :background-color="sidebarColor" :text-color="textColor"
            :active-text-color="activeTextColor" :show-timeout="showTimeout" :hide-timeout="hideTimeout"
            @select="clickItem" class="display-flex column element align-items-center" ref="sidebar" :style="{
                '--bg-color': sidebarColor,
                '--text-color': textColor,
                '--active-text-color': activeTextColor,
                '--hover-color': hoverColor,
                '--active-bg-color': activeBgColor,
            }" menu-trigger="click">
            <SidebarSkeleton v-if="loading" />
            <template v-else>
                <button :class="`collapse-btn ${collapsed ? 'collapsed' : ''}`" type="button"
                    @click="$emit('collapse-menu')">
                    <slot name="collapse-btn" />
                </button>
                <ElMenuItem class="logo-item" index="home">
                    <div class="display-flex align-items-center justify-content-center">
                        <img class="image" :src="collapsed ? smallLogo : logo" />
                    </div>
                </ElMenuItem>
                <div
                    class="display-flex column item-content flex-grow-1 justify-content-center align-items-center sidebar-container">
                    <slot name="sidebar-container" v-if="$slots['sidebar-container']" />
                    <template v-else>
                        <template v-for="(item_key, index) in Object.keys(items)">
                            <ElMenuItem :index="item_key" :key="`${item_key}-${index}`"
                                v-if="!items[item_key].sub_items">
                                <ItemCard :collapsed="collapsed" :short_label="items[item_key].short_title"
                                    :label="items[item_key].title" :id="`item-${index}`" :icon_color="textColor" />
                            </ElMenuItem>
                            
                            <ElSubmenu :index="item_key" :key="`${item_key}${index}`" v-if="items[item_key].sub_items && hasPermission">
                                <ItemCard slot="title" :collapsed="collapsed" :label="items[item_key].title"
                                  :index="item_key" :short_label="items[item_key].short_title"
                                    :icon_color="textColor" />
                                    
                                <ElMenuItemGroup>
                                    <ElMenuItem v-for="(sub_key, sub_index) in Object.keys(items[item_key].sub_items)"
                                        :key="`${item_key}-${sub_key}`" :index="`${sub_key}`"
                                        :id="`item-${index}-${sub_index}`" class="submenu">
                                        <ItemCard slot="title" :label="items[item_key].sub_items[sub_key].title"
                                        @clicked="clickedSub" :index="sub_key" :short_label="items[item_key].sub_items[sub_key].short_title"
                                        :icon_color="textColor" />                                       
                                    </ElMenuItem>
                                </ElMenuItemGroup>
                            </ElSubmenu>
                        </template>

                        <ElMenuItem class="margin-top-auto" index="exit" v-if="showExit">
                            <ItemCard class="exit-item" :collapsed="collapsed" label="Sair" :hide_tooltip="true"
                                :id="`item-${Object.keys(items).length}`" :icon_color="textColor" />
                        </ElMenuItem>
                    </template>
                </div>
            </template>
        </el-menu>
    </div>
</template>

<script>
import Vue from 'vue';
import { Menu, Submenu, MenuItem, MenuItemGroup, Tooltip } from 'element-ui';
Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem);
Vue.component(MenuItemGroup.name, MenuItemGroup);
Vue.component(Tooltip.name, Tooltip);
import ItemCard from './parts/ItemCard/ItemCard.vue';
import SidebarSkeleton from './SidebarSkeleton.vue';
export default {
    name: 'Sidebar',
    props: {
        show_clubs: {
            type: Boolean,
            default: false,
        },
        hoverColor: {
            type: String,
            default: '#665DA6',
        },
        backgroundColor: {
            type: String,
            default: '#F1F3F5',
        },
        textColor: {
            type: String,
            default: '#495057',
        },
        activeBgColor: {
            type: String,
            default: '#5D4A99',
        },
        activeTextColor: {
            type: String,
            default: '#FFFFFF',
        },
        collapsed: {
            type: Boolean,
            default: true,
        },
        active: {
            type: String,
            default: 'home',
        },
        loading: {
            type: Boolean,
            default: true,
        },
        showExit: {
            type: Boolean,
            default: true,
        },
        showTimeout: {
            type: Number,
            default: 300,
        },
        hideTimeout: {
            type: Number,
            default: 300,
        },
        logo: {
            type: String,
            default: 'https://parceiro-da-construcao-frontend.s3.us-east-2.amazonaws.com/img/logo-new.svg',
        },
        smallLogo: {
            type: String,
            default: 'https://parceiro-da-construcao-frontend.s3.us-east-2.amazonaws.com/img/new-small-logo.svg',
        },
        hasTenant: {
            type: Boolean,
        },
        accountId: {
            type: Number,
        },
    },
    components: {
        ItemCard,
        SidebarSkeleton
    },
    data() {
        return {
            item_counter: 0,
            submenu_myaccount: false,
        };
    },
    computed: {
        sidebarColor() {
            if (this.loading) {
                return '#F1F3F5';
            }
            return this.backgroundColor;
        },
        items() {
            let result_items = {};
            if(!this.hasTenant){
                result_items.home = {
                    title: 'Início',
                    color: '#495057',
                };
            }
            result_items.courses = {
                title: 'Cursos',
                color: '#495057',
            };
            result_items.collections = {
                title: 'Trilhas',
                color: '#495057',
            };
            result_items.my_learning = {
                title: 'Meu Aprendizado',
                color: '#495057',
            };
            result_items.ranking = {
                title: 'Ranking',
                color: '#495057',
            };
            result_items.professional = {
                title: 'Profissional',
                color: '#495057',
                sub_items:{
                    my_profile:{
                        title: 'Meu perfil',
                    },
                    profile_professional: {
                        title: 'Buscar profissional'
                    }
                }
            };
            result_items.campign = {
                title: 'Pedreiro TOP',
                color: '#495057',
            };
                            
            
            return result_items;
        },
        svgs() {
            return {
                small: 'https://parceiro-da-construcao-frontend.s3.us-east-2.amazonaws.com/img/new-small-logo.svg',
                big: 'https://parceiro-da-construcao-frontend.s3.us-east-2.amazonaws.com/img/logo-new.svg',
                exit: 'https://parceiro-da-construcao-frontend.s3.us-east-2.amazonaws.com/img/sair.svg',
            };
        },
        
        hasPermission(){
            // const arrPermissions = ['professional']
            // if(this.roles && this.roles.length > 0){
            //     return arrPermissions.every(value => this.roles.includes(value));
            // }

            return [4888,7389, 7971, 9640, 9890, 10821, 14917, 25587, 27220, 27506, 36358, 36435, 38023, 40539, 45643, 53869, 54626, 54982, 55880, 57661, 61500, 62134, 63263, 63939, 64078, 65407, 65413, 71253, 76754, 78244, 80937, 85215, 91126, 98966, 101092, 103432, 103691, 104459, 105842, 105861, 107336, 107639, 110149, 111555, 112660, 112807, 115740, 116232, 116350, 116559, 117250, 117396, 118648, 119000, 125243, 126914, 127259, 127359, 128384, 128669, 129703, 129988, 131758, 132711, 132906, 135288, 135413, 135585, 136151, 136439, 137793, 138527, 138701, 138989, 139379, 139600, 139671, 140295, 140544, 141091, 141736, 141778, 143267, 143520, 143565, 144625, 145429, 146016, 146093, 146280, 146546, 147003, 147746, 148059, 148202, 148824, 149433, 149436, 149464, 149572, 149585, 150053, 150541, 150684, 150798, 151270, 152093, 152107, 152293, 152362, 152799, 152802, 153054, 153262, 153568, 154715, 155670, 155788, 156452, 157280, 157733, 157990, 158390, 158447, 158990, 160782, 161116, 161181, 161778, 162664, 163331, 165839, 166339, 168125, 168222, 168754, 169065, 170435, 171163, 171575, 171851, 172286, 172983, 173683, 176281, 178177, 178545, 178855, 179048, 180422, 180460, 180884, 182027, 182105, 182575, 183085, 183257, 184148, 184645, 185099, 185415, 185888, 186475, 186500, 187196, 187241, 187691, 189173, 189729, 190145, 190386, 193336, 193747, 193820, 194483, 194599, 194843, 195601, 195701, 196597, 196970, 197912, 198227, 198877, 199758, 199831, 200097, 200258, 201239, 201714, 201898, 202610, 202690, 203330, 203406, 203472, 203628, 205088, 205134, 205755, 206137, 206211, 206566, 208853, 209041, 209604, 210220, 213046, 214747, 214749, 215045, 215102, 215401, 215489, 218024, 218119, 218433, 218571, 218756, 219005, 219180, 219299, 221169, 235493, 246536].includes(this.accountId)
        }
    },
    methods: {
        clickedSub(index) {
            if (this.collapsed) {
                this.$emit('open-menu');
                setTimeout(() => {
                    this.$refs.sidebar.openMenu(index);
                }, this.showTimeout);
            }
        },
        clickItem(item) {
            this.$emit('click-item', item);
        }
    },
};
</script>

<style lang="scss">
@import './styles.scss';
</style>
