<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-else>
                                <ItemCard slot="title" :collapsed="collapsed" :label="items[item_key].title"
                                    @clicked="clickedSub" :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="`${item_key}-${sub_key}`"
                                        :id="`item-${index}-${sub_index}`" class="submenu">
                                        {{ items[item_key].sub_items[sub_key].title }}
                                    </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,
        }
    },
    components: {
        ItemCard,
        SidebarSkeleton
    },
    data() {
        return {
            item_counter: 0
        };
    },
    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',
            };           
            
            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',
            };
        },
    },
    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>
