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

        <div class="horizontal-scalable-wrapper" :style="resizerWrapperStyle"
            v-show="controlPanel.currentIndex > -1">
            <div class="horizontal-resizer"
                @mousedown="horizontalResizer.mousedown()"
                @mouseenter="horizontalResizer.hover = true"
                @mouseleave="horizontalResizer.hover = false"
                :class="{ 'active': horizontalResizer.active || horizontalResizer.hover }"
            ></div>
            <div class="netlist-function-panel">
                <TreeView
                    v-show="controlPanel.currentIndex === 0"></TreeView>
                <Setting
                    v-show="controlPanel.currentIndex === 1"></Setting>
                <About
                    v-show="controlPanel.currentIndex === 2"></About>
            </div>
        </div>

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

<script setup>
import { computed, defineComponent, onMounted, reactive } from 'vue';
 
import TreeView from '@/components/treeview';
import Setting from '@/components/setting';
import About from '@/components/about';
import { emitter } from '@/hook/global';
import { controlPanel, horizontalResizer, resize } from './right-nav';

defineComponent({ name: 'right-nav' });

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


onMounted(() => {
    document.addEventListener('mouseup', () => {
        horizontalResizer.active = false;
        document.removeEventListener('mousemove', resize);
    });
});

const resizerWrapperStyle = computed(() => ({
    width: horizontalResizer.width + 'px'
}));

</script>

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

.netlist-function-panel {
    display: flex;
    background-color: var(--sidebar);
    height: 100vh;
    box-shadow: var(--gray-box-shadow-1);
    z-index: 200;
    width: 100vw;
    user-select: none;
}

.horizontal-scalable-wrapper {
    position: relative;
}

.horizontal-resizer {
    position: absolute;
    left: 0;
    width: 2px;
    height: 100%;
    cursor: ew-resize;
    transition: var(--animation-5s);
    z-index: 201;
}

.horizontal-resizer.active {
    background-color: var(--main-color);
    transition: var(--animation-5s);
}

.netlist-function-option {
    width: fit-content;
    height: 100vh;
    background-color: var(--sidebar);
    box-shadow: var(--gray-box-shadow-1);
    z-index: 201;
}

.netlist-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;
    color: var(--vscode-foreground);
}

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

.netlist-control-panel-icon {
    width: 45px;
    height: 45px;
    font-size: 30px;
}

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