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

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

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

const goToNote = (note: Note) => {
  setActiveNote(note.id)
  active.value = false
  if (queryElem.value) queryElem.value.blur()
}
const queryElem = ref<HTMLInputElement | null>(null)

const activeResult = ref<Note>()

const handleKeydown = (event: KeyboardEvent) => {
  const code = event.code
  if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) {
    let index = results.value.findIndex((note) => note.id === activeResult.value?.id)
    if (['ArrowDown', 'Tab'].includes(code)) {
      index++
    } else if (['ArrowUp'].includes(code)) {
      index--
    }
    if (index + 1 > results.value.length) index = index - results.value.length
    if (index < 0) index = results.value.length - 1
    activeResult.value = results.value[index]
  } else if (code === 'Enter' && activeResult.value) {
    goToNote(activeResult.value)
  } else if (code === 'Escape' && queryElem.value) {
    queryElem.value.blur()
  }
}
</script>
<template>
  <div id="search-container" class="relative h-full flex-grow">
    <input
      type="text"
      placeholder="Search for notes"
      class="h-full w-full rounded border-0 bg-white/10 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"
      ref="queryElem"
      @keydown="handleKeydown"
    />
    <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
      <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
        <template v-if="results.length > 0">
          <SearchResult
            v-for="result in results"
            :key="result.id"
            :result="result"
            :active-result="activeResult"
            @go-to-note="() => goToNote(result)"
          />
        </template>
        <li v-else><a>No notes found</a></li>
      </ul>
    </div>
  </div>
</template>
