<template>
    <div id="container-pdc" :class="`screen-size ${screen_size} ${!show_sidebar ? 'full-width' : ''}`">
        <div class="sidebar-area" v-if="show_sidebar">
            <Sidebar ref="sidebar" :active="active" :defaultCollpaseValue="true" @collapse-menu="toggleMenu"
                @open-menu="openMenu" :collapsed="sidebar_collapsed" @click-item="clickMenuItem"
                :show_clubs="show_clubs" :loading="loading" :backgroundColor="sidebarBgColor"
                :textColor="sidebarTextColor" :activeBgColor="sidebarActiveBgColor" :hoverColor="sidebarActiveBgColor"
                :logo="logo" :smallLogo="smallLogo" :hasTenant="hasTenant">
                <template slot="sidebar-container">
                    <slot name="sidebar-container" />
                </template>
                <HamburgerMenu slot="collapse-btn" :active="!sidebar_collapsed" color="#FFFFFF" />
            </Sidebar>
        </div>
        <div :class="`${sidebar_collapsed
        ? 'app-container-foundation '
        : 'app-container-foundation menu-collapsed'
        } `">
            <Topbar ref="topbar" :show_help_btn="show_help_btn" @toggleMenu="toggleMenu" :pageTitle="pageTitle"
                :firstName="firstName" :profileImage="profileImage" :isAdmin="isAdmin" @click-item="clickMenuItem"
                :show_chiligum="show_chiligum" :loading='loading' :class="`${!show_sidebar ? 'full-width' : ''}`"
                :hoverColor="topbarHoverColor" :textColor="topbarTextColor">
                <template slot="topbar-container">
                    <slot name="topbar-container" />
                </template>
                <template slot="topbar-dropdown">
                    <slot name="topbar-dropdown" />
                </template>
                <template slot="topbar-title">
                    <slot name="topbar-title" />
                </template>
                <HamburgerMenu slot="collapse-btn" :active="!sidebar_collapsed" :color="hamburgerMenuBgColor" />
            </Topbar>
            <div :class="`app-content`">
                <div @click="toggleMenu" :class="`sidebar-overlay ${!sidebar_collapsed && 'active'
                }`" v-if="['small', 'medium'].includes(screen_size)" />
                <slot name="container" />
            </div>
            <Footer :loading='loading' v-if="show_footer" />
        </div>
    </div>
</template>

<script>
import Sidebar from '../../lib-components/Sidebar/Sidebar.vue';
import Topbar from '../../lib-components/Topbar/Topbar.vue';
import HamburgerMenu from '../../lib-components/HambugerMenu/HambugerMenu.vue';
import Footer from '../../lib-components/Footer/Footer.vue';

export default {
    name: 'ContainerPdc',
    props: {
        show_help_btn: {
            type: Boolean,
            default: true
        },
        show_footer: {
            type: Boolean,
            default: true,
        },
        show_sidebar: {
            type: Boolean,
            default: true,
        },
        show_clubs: {
            type: Boolean,
            default: false,
        },
        show_chiligum: {
            type: Boolean,
            default: false,
        },
        active: {
            type: String,
            default: 'home',
        },
        profileImage: {
            type: String,
            default: () => null,
        },
        firstName: {
            type: String,
            default: 'Primeiro nome',
        },
        pageTitle: {
            type: String,
            default: 'Cursos',
        },
        breakpoints: {
            type: Object,
            default: () => ({
                small: 1200,
                medium: 1400,
            }),
        },
        isAdmin: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: true,
        },
        sidebarBgColor: {
            type: String,
            default: '#F1F3F5',
        },
        sidebarActiveBgColor: {
            type: String,
            default: '#5D4A99',
        },
        sidebarTextColor: {
            type: String,
            default: '#495057',
        },
        sidebarHoverColor: {
            type: String,
            default: '#665DA6',
        },
        hamburgerMenuBgColor: {
            type: String,
            default: '#5D4A99',
        },
        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',
        },
        topbarHoverColor: {
            type: String,
            default: '#DED9FF',
        },
        topbarTextColor: {
            type: String,
            default: '#495057',
        },
        hasTenant: {
            type: Boolean,
        }
    },
    components: {
        Sidebar,
        Topbar,
        HamburgerMenu,
        Footer
    },
    data() {
        return {
            sidebar_collapsed: true,
            window_width: window.innerWidth,
            window_inner_height: window.innerHeight * .01,
        };
    },
    watch: {
        window_width(val) {
            this.setSize();
        },
    },
    created() {
        this.getScreenSize();
        this.initScreenSizesWatcher();
    },
    computed: {
        screen_size() {
            let size = this.window_width;
            if (this.breakpoints.small && size <= this.breakpoints.small) {
                return 'small';
            }
            if (this.breakpoints.medium && size <= this.breakpoints.medium) {
                return 'medium';
            }
            return 'large';
        },
    },
    methods: {
        setHeightScreen() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        },
        initScreenSizesWatcher() {
            window.onresize = () => {
                this.getScreenSize();
            };
            this.setSize();
        },
        getScreenSize() {
            this.window_width = window.innerWidth;
            this.window_inner_height = window.innerHeight * .01;
            document.documentElement.style.setProperty('--vh', `${this.window_inner_height}px`);
        },
        setSize() {
            if (this.screen_size === 'small') {
                return (this.sidebar_collapsed = true);
            }
            if (this.screen_size === 'large') {
                return (this.sidebar_collapsed = false);
            }
            this.sidebar_collapsed = true;
        },
        openMenu() {
            this.sidebar_collapsed = false;
        },
        toggleMenu(emit = true) {
            this.sidebar_collapsed = !this.sidebar_collapsed;
            if (emit) this.$emit('menu-toggle', !this.sidebar_collapsed);
        },
        setMenuOpen() {
            this.sidebar_collapsed = false;
        },
        clickMenuItem(item) {
            this.$emit('click-item', item);
        },
    },
};
</script>

<style lang="scss">
@import './styles.scss';
// @import '~element-ui/lib/theme-chalk/loading';
</style>
