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

<script>
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n';

import { emitter, globalLookup } from '@/hook/global';

/* eslint-disable */
export default {
    name: 'signals',
    props: {},
    setup() {
        const { t } = useI18n();

        // signal : link, name, size, type
        const signals = reactive({
            content: []
        });

        emitter.on('tree-view', sendWires => {
            signals.content.length = 0;
            signals.content = sendWires;
        });

        function makeSignalCaption(signal) {
            return signal.size === 1 ? '' : `${signal.size - 1}:0`;
        }

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

        return {
            signals,
            clickItem,
            globalLookup,
            makeSignalCaption,
            t
        }
    }
}
</script>

<style>
.icon-wave-square {
    color: var(--signal-default-color);
}

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

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


.vcd-signal-signal-item::selection {
    background: none;
}

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

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