<script setup lang="ts">
const model = defineModel()

const query = ref('')
const items = ref([])

const isOpen = ref(false)
const isLoading = ref(false)

const search = useDebounceFn(async () => {
  if (query.value.length > 1) {
    isLoading.value = true

    items.value = (await fetchApi('categories?q=' + query.value)).data

    isLoading.value = false
  }
}, 250)

function create(name) {
  model.value = { name: name.trim() }

  query.value = ''
  isOpen.value = false
}
</script>

<template>
  <USelectMenu v-model="model"
               v-model:open="isOpen"
               v-model:search-term="query"
               :items="items"
               :loading="isLoading"
               label-key="name"
               create-item="always"
               @create="create"
               @update:search-term="search" />
</template>