<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { notes, findNotes } from '@/composables/useNotes'

const active = ref(false)
watch(active, () => {
  if (!active.value) query.value = ''
})

const query = ref('')
const results = computed<Note[]>(() => {
  return query.value ? findNotes(query.value) : notes.value
})

const click = (note: Note) => {
  console.log(note.title)
}
</script>
<template>
  <div id="search-container" class="relative h-full flex-1">
    <input
      type="text"
      placeholder="Search for notes"
      class="h-full w-full rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
      @focus="active = true"
      @mousedown="active = true"
      @blur="active = false"
      v-model="query"
    />
    <div
      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
      v-if="active && results.length > 0"
    >
      <ul
        tabindex="0"
        class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
      >
        <li v-for="note in results">
          <a
            class="px-2 py-1"
            @click.stop.prevent="() => click(note)"
            @mousedown.prevent
            >{{ note.title }}</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>
