<script setup>
import Dialog from "primevue/dialog";
import InputText from "primevue/inputtext";
import { useLayout } from "../composables/layout/layout.js";
import { ref } from "vue";

const { layoutState } = useLayout();

const searchInput = ref(null);

function toggleSearchBar() {
  layoutState.searchBarActive = !layoutState.searchBarActive;
}

function focusOnInput() {
  searchInput.value.$el.focus();
}
</script>

<template>
  <Dialog
    v-model:visible="layoutState.searchBarActive"
    :breakpoints="{ '992px': '75vw', '576px': '90vw' }"
    modal
    dismissable-mask
    :pt="{
      root: 'w-1/2',
      header: 'hidden!',
      content: {
        class: 'p-0!',
        style: { borderRadius: 'var(--p-dialog-border-radius)' },
      },
    }"
    @show="focusOnInput"
  >
    <div class="search-container">
      <i class="pi pi-search" />
      <InputText
        ref="searchInput"
        type="text"
        class="p-inputtext search-input"
        placeholder="Search"
        @keydown.enter="toggleSearchBar"
      />
    </div>
  </Dialog>
</template>
