<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import BarcodeModal from './BarcodeModal.vue'

  const searchterm = ref("");
  const router = useRouter();

  const props = defineProps({
    sizeClass: String,
    isMobile: Boolean
  });

  const emit = defineEmits('searchDone')

  const vMobileFocus = {
    mounted: (el, binding) => el.focus();
  }

  function onSearchClick() {
    if (typeof searchterm.value === "undefined" || searchterm.value === "") {
      return
    }
    emit('searchDone')
    router.push('/search/' + searchterm.value);
  }
</script>

<template>
  <div class="navbar-item">
    <div class="field has-addons">
      <div class="control">
        <input v-mobile-focus="isMobile ? true : null" v-model="searchterm" @keyup.enter="onSearchClick()" class="input" :class="sizeClass" type="text" />
      </div>
      <div class="control">
        <button @click="onSearchClick()" class="button" :class="sizeClass">
          <span class="icon" title="Search">
            <b-icon-search />
          </span>
        </button>
      </div>
      <BarcodeModal v-if="!isMobile"/>
    </div>
  </div>
</template>

<style scoped></style>
