<script setup lang="ts">
import type { Search, File, Project, User } from '~/types/api';

const input = ref(''), results = ref<Search>({ projects: [], files: [], users: [] });
const pos = ref<DOMRect>(), loading = ref(false);

let timeout: NodeJS.Timeout;

function search(e: Event)
{
    pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();

    loading.value = true;
    clearTimeout(timeout);
    timeout = setTimeout(debounced, 250);
}
async function debounced()
{
    if(!input.value)
        return;

    try 
    {
        const fetch = await useFetch(`/api/search`, {
            query: {
                "search": `%${input.value}%`
            }
        });

        results.value = fetch.data.value;
    }
    catch (e) {
        results.value = { projects: [], files: [], users: [] };
    }

    loading.value = false;
}
</script>

<template>
    <div class="search-view-outer">
        <div class="search-view-container">
            <span class="published-search-icon"></span>
            <input class="search-bar" type="text" placeholder="Recherche" v-model="input" @input="search">
        </div>
    </div>
    <Teleport to="#teleports" v-if="input !== '' && !!pos">
        <div class="search-results"
            :style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
            <div class="loading" v-if="loading"></div>
            <template v-else>
                <div class="suggestion-item suggestion-project" v-for="result of results.projects" :key="result.id"
                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
                    @mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
                    <div class="suggestion-content">
                        <BoldContent class="suggestion-title" :text="result.name" :matched="input" />
                        <div class="suggestion-subtext">
                            <div class="suggestion-text">{{ result.username }}</div>
                            <div class="suggestion-text">{{ result.pages }} pages</div>
                        </div>
                    </div>
                </div>
                <div class="suggestion-item suggestion-file" v-for="result of results.files" :key="result.id"
                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
                    @mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
                    <div class="suggestion-content">
                        <BoldContent class="suggestion-title" :text="result.title" :matched="input" />
                        <div class="suggestion-subtext">
                            <div class="suggestion-text">{{ result.username }}</div>
                            <div class="suggestion-text">{{ result.comments }} commentaires</div>
                        </div>
                    </div>
                </div>
                <div class="suggestion-item suggestion-user" v-for="result of results.users" :key="result.id"
                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
                    @mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
                    <div class="suggestion-content">
                        <BoldContent class="suggestion-title" :text="result.username" :matched="input" />
                    </div>
                </div>
                <div class="suggestion-empty"
                    v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
                    Aucun résultat
                </div>
            </template>
        </div>
    </Teleport>
</template>