<script setup>
  import {ref} from 'vue'
  import AisTypeAhead from '@c/typeahead/AisTypeAhead.vue'
  import LocalPersonService from "@c/typeahead/examples/LocalPersonService.js";

  const personService = new LocalPersonService()
  const selection = ref('GrayCooper5')
  const selectedObject = ref(undefined)

  const handleLoad = (value) => {
    console.log('TypeAhead load', value)
    selectedObject.value = value
  }

  const handleChange = (value) => {
    console.log('TypeAhead change', value)
    selectedObject.value = value
  }
</script>

<template>
  <div class="grid gap-4">
    <AisTypeAhead
        :service="personService"
        lookup="hawk_id"
        v-model="selection"
        @load="handleLoad"
        @change="handleChange"
        placeholder="Person search..."
    />
    <div class="grid gap-4 bg-ui-gray-50 p-4">
      <div><span class="font-semibold">v-model: </span>{{ selection }}</div>
      <div><span class="font-semibold">Selected object: </span>{{ selectedObject }}</div>
    </div>
  </div>
</template>
