<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>
