<script setup lang="ts">
import { ADDRESS_PICKER_SEARCH_FOR_ADDRESSES, trans } from 'translator';
const emits = defineEmits<{
    search: [search: string];
}>();

let searchTimer = 0;
let searchString: string;

const onInput = function (event: InputEvent) {
    const target = event.target as HTMLInputElement;
    const value = target.value;
    searchString = value;

    if (0 === searchTimer) {
        window.clearTimeout(searchTimer);
        searchTimer = 0;
    }

    searchTimer = window.setTimeout(() => {
        if (value === searchString) {
            emits("search", value);
        }
    }, 500);
};
</script>

<template>
    <div class="input-group mb-3">
        <span class="input-group-text">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
            </svg>
        </span>
        <input type="search" class="form-control" @input="onInput" :placeholder="trans(ADDRESS_PICKER_SEARCH_FOR_ADDRESSES)" />
    </div>
</template>

<style scoped lang="scss"></style>
