<template>
    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
        justify-between">
        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
            v-model="inputQuery" @keypress="handleKeyPressOfSearch"
        />
        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer" @click="onSearchClick"
            alt="search"/>
    </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/AccountMenu/SearchBar Search input bar for
 *   filtering accounts, emits search query on click or Enter key.
 */

import { ref } from 'vue';
import i18next from '@/i18n/i18n.js';

const emit = defineEmits(['on-search-account-button-click']);

const inputQuery = ref("");

/**
 * Emits the search query when the search icon is clicked.
 * @param {Event} event - The click event.
 */
const onSearchClick = (event) => {
    event.preventDefault();
    emit('on-search-account-button-click', inputQuery.value);
};

/**
 * Emits the search query when Enter key is pressed.
 * @param {KeyboardEvent} event - The keypress event.
 */
const handleKeyPressOfSearch = (event) => {
    if (event.key === 'Enter') {
        emit('on-search-account-button-click', inputQuery.value);
    }
};
</script>
