<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="w-full border border-light-30 dark:border-dark-30">
        <input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
    </div>
    <Teleport to="#teleports" v-if="input !== '' && !!pos">
        <div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto
        scroll"
            :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="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " 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="">
                        <BoldContent class="text-lg" :text="result.name" :matched="input" />
                        <div class="flex justify-between text-sm">
                            <div class="">{{ result.username }}</div>
                            <div class="">{{ result.pages }} pages</div>
                        </div>
                    </div>
                </div>
                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " 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="">
                        <BoldContent class="text-lg" :text="result.title" :matched="input" />
                        <div class="flex justify-between text-sm">
                            <div class="">{{ result.username }}</div>
                            <div class="">{{ result.comments }} commentaires</div>
                        </div>
                    </div>
                </div>
                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " 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="">
                        <BoldContent class="text-lg" :text="result.username" :matched="input" />
                    </div>
                </div>
                <div class=""
                    v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
                    Aucun résultat
                </div>
            </template>
        </div>
    </Teleport>
</template>