<template>
    <div>
        <div>Signals({{wires.content.length}})</div>
        <hr>
        <div class="vcd-signal-wires-display">
            <div v-for="(wire, index) in wires.content" :key="index"
                @click="clickItem(wire)"
                class="vcd-signal-wire-item"
                :class="globalLookup.currentWires.has(wire) ? 'vcd-treeview-selected' : ''">
                <div><span class="iconfont icon-wave-square"></span>&ensp;{{ wire.name }}</div>
                <div>
                    <div :class="wire.caption ? 'vcd-signal-wire-caption' : ''">
                        {{ wire.caption }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue';
import { emitter, globalLookup } from '@/hook/global';

/* eslint-disable */
export default {
    name: 'wires',
    props: {},
    setup() {
        // wire : link, name, size, type
        const wires = reactive({
            content: []
        });

        emitter.on('tree-view', sendWires => {
            wires.content.length = 0;
            for (const wire of sendWires) {
                const caption = wire.size === 1 ? '' : `${wire.size - 1}:0`;
                wires.content.push({
                    name: wire.name,
                    caption
                });
            }
        });

        function clickItem(wire) {
            if (globalLookup.currentWires.has(wire)) {
                globalLookup.currentWires.delete(wire);
            } else {
                globalLookup.currentWires.add(wire);
            }
        }

        return {
            wires,
            clickItem,
            globalLookup
        }
    }
}
</script>

<style>
.icon-wave-square {
    color: #00F600;
}

.vcd-signal-wires-display {
    color: var(--sidebar-item-text);
    padding: 0px 8px;
}

.vcd-signal-wire-item {
    margin: 3px;
    display: flex;
    justify-content: space-between;
    height: 25px;
    cursor: pointer;
    align-items: center;
}

.vcd-signal-wire-item:hover {
    background-color: var(--vscode-button-hoverBackground);
    border-radius: .3em;
}

.vcd-signal-wire-caption {
    color: var(--sidebar-item-text);
    border-radius: .5em;
    background-color: var(--color-deepPurple);
    padding: 3px;
    font-size: 15px;
}
</style>