<template>
    <div
        class="tree-view-search-wrapper"
    >
        <div style="height: 5vh;">
            <el-input
                :placeholder="t('search-signal')"
                v-model="searchManage.content"
                @input="safeSearch"
                @focus="searchManage.displayResult = true"
                @blur="searchManage.displayResult = false"
            />
        </div>
        <transition name="collapse-from-top">
            <div
                v-show="searchManage.displayResult || searchManage.mouseOnResult"
                :style="searchResultWrapper"
                class="search-result-wrapper"
                id="search-result-wrapper"
            >
                <el-scrollbar
                    height="50vh"
                    width="600px"
                    class="search-result"
                    @mouseenter="searchManage.mouseOnResult = true"
                    @mouseleave="searchManage.mouseOnResult = false"     
                >
                    <div v-if="searchManage.searchResult.length > 0">
                        <div v-for="(searchResult, index) in searchManage.searchResult"
                                :key="index"
                                :class="globalLookup.currentWires.has(searchResult.module) ? 'vcd-treeview-selected' : ''"
                                @click="toggleRender(searchResult.module)">
                                <div v-html="searchResult.htmlString" class="search-result-item"></div>                             
                        </div>
                    </div>
                    <div v-else class="search-nothing">
                        <span class="iconfont icon-empty"></span>
                        <span>{{ t('search-nothing') }}</span>
                    </div>
                </el-scrollbar>
            </div>
        </transition>

    </div>
</template>

<script setup>
import { reactive, computed, defineComponent, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { globalSetting, globalLookup, emitter } from '@/hook/global';
import { debounceWrapper, makeSearchResultItem } from '@/hook/utils';
import { toggleRender } from '@/hook/render';
const { t } = useI18n();

defineComponent({ name: 'search-box' });

const searchResultWrapper = computed(() => ({
    right: '55px',
    transition: 'var(--animation-3s)'
}));


const searchManage = reactive({
    content: '',
    displayResult: false,
    mouseOnResult: false,
    searchResult: [],
    searchResultEl: undefined,
    searchResultLeft: -5,
});


function search() {
    const searchString = searchManage.content.trim();
    if (searchString.length === 0) {
        searchManage.displayResult = false;
        searchManage.searchResult = []
        return;
    }

    searchManage.displayResult = true;
    searchManage.searchResult = [];

    const stacks = [ { name: '', body: globalLookup.topModules } ];
    const searchRule = new Set(globalSetting.searchScope);
    const caseSensitivity = globalSetting.caseSensitivity;
    const displayParentOnly = globalSetting.displayParentOnly;

    while (stacks.length > 0) {
        const p = stacks.pop();
        if (p.body && p.body.length) {
            p.body.forEach(mod => stacks.push(mod));
        }

        const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
        if (searchResultItem) {
            emitter.emit('signal-search', searchResultItem);
        }
    }

    nextTick(() => {
        searchManage.searchResultEl = document.getElementById('search-result-wrapper');
        if (searchManage.searchResultEl) {
            searchManage.searchResultLeft = 480 - searchManage.searchResultEl.offsetWidth;
        }
    })
}

emitter.on('signal-search', searchResultItem => {
    searchManage.searchResult.push(searchResultItem);
});

const safeSearch = debounceWrapper(search, 200);

</script>

<style>
.tree-view-search-wrapper {
    padding: 10px;
    transition: flex .5s ease-in-out;
}

.search-result-wrapper {
    position: absolute;
    padding: 10px;
    margin: 10px;
    background-color: var(--sidebar);
    border: 1.5px solid var(--main-color);
    color: var(--vscode-foreground);
    border-radius: .5em;
    min-width: 500px;
    z-index: 10;
}

.search-result {
    max-height: 80vh;
    max-width: 600px;
    padding-right: 5px;
}

.search-result-item {
    display: flex;
    align-items: center;
    height: 25px;
    margin: 3px;
    width: 800px;
    padding-left: 3px;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: var(--sidebar-item-selected);
    border-radius: .3em;
}

.dep-arrow {
    height: 7px;
    width: 7px;
    border-top: solid 1.7px var(--vscode-foreground);
    border-left: solid 1.7px var(--vscode-foreground);
    transform: rotate(225deg);
    margin-top: 6px;
    margin-bottom: 8px;
    margin-left: 3px;
}

.search-result-item .dep-arrow {
    transform: rotate(135deg);
    margin-left: 2px;
    margin-right: 7px;
}

.search-nothing {
    height: 40vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.search-nothing .iconfont {
    font-size: 120px;
}

</style>