<template>
    <div class="vcd-right-nav">

        <div class="vcd-function-panel">
            <TreeView :topModules="props.topModules"
                v-show="controlPanel.currentIndex === 0"></TreeView>
            <Setting
                v-show="controlPanel.currentIndex === 1"></Setting>
            <About
                v-show="controlPanel.currentIndex === 2"></About>
        </div>

        <div class="vcd-function-option">
            <div class="vcd-control-panel-wrapper">
                <img class="vcd-control-panel-icon" src="../assets/icon.png" alt="">
            </div>
            <hr>
            <div class="vcd-control-panel-wrapper"
                v-for="(section, index) of controlPanel.sections" :key="index"
                @click="controlPanel.click(index)"
            >
                <div :class="controlPanel.currentIndex === index ? 'vcd-control-panel-active': ''"><span 
                    class="vcd-control-panel-icon"
                    :class="section.iconClass"
                    ></span></div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue';

import TreeView from '@/components/treeview';
import Setting from '@/components/setting';
import About from '@/components/about';
import { emitter } from '@/hook/global';


export default {
    name: 'right-nav',
    components: {
        TreeView,
        Setting,
        About
    },
    props: {
        topModules: Array
    },
    setup(props) {

        const controlPanel = reactive({
            sections: [
                {
                    iconClass: 'iconfont icon-Collections'
                },
                {
                    iconClass: 'iconfont icon-setting'
                },
                {
                    iconClass: 'iconfont icon-about'
                }
            ],
            currentIndex: -1,
            click(index) {
                if (this.currentIndex === index) {
                    this.currentIndex = -1;
                } else {
                    this.currentIndex = index;
                }

                // console.log(this.currentIndex);
            }
        });

        emitter.on('right-nav', index => {
            if (controlPanel.currentIndex === index) {
                controlPanel.currentIndex = -1;
            } else {
                controlPanel.currentIndex = index;
            }
        })

        return {
            props,
            controlPanel
        };
    }
}
</script>

<style>
.vcd-right-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
}

.vcd-function-panel {
    display: flex;
    background-color: var(--sidebar);
    height: 100vh;
    box-shadow: 0 0 15px 1px rgb(16, 16, 16);
}

.vcd-function-option {
    width: fit-content;
    height: 100vh;
    background-color: var(--sidebar);
    box-shadow: 0 0 15px 1px rgb(16, 16, 16);
}

.vcd-control-panel-wrapper {
    width: var(--right-nav-width);
    height: var(--right-nav-width);
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 10px;
}

.vcd-control-panel-wrapper:hover {
    color: var(--vscode-icon-foreground);
}

.vcd-control-panel-icon {
    width: 50px;
    height: 50px;
    font-size: 35px;
}

.vcd-control-panel-active {
    color: var(--main-color);
}
</style>