<script setup>
import {ref, computed, onBeforeMount} from 'vue'
import {useVModel} from "@vueuse/core";
import AisTypeAhead from '@c/typeahead/AisTypeAhead.vue'
import AisTypeAheadEntry from "../AisTypeAheadEntry.vue";
import LocalPersonService from "@c/typeahead/examples/LocalPersonService.js";

const props = defineProps({
  modelValue: {type: [String, Number], required: false },
  department: {type: String, required: false, default: undefined }
})

const emit = defineEmits([
    'update:modelValue',
    'load',
    'change'
])

const personService = computed(() => {
  return new LocalPersonService(props.department)
})

const model = useVModel(props, 'modelValue', emit)
</script>

<template>
  <AisTypeAhead
      :service="personService"
      lookup="hawk_id"
      v-model="model"
      @load="emit('load', $event)"
      @change="emit('change', $event)"
      placeholder="Scoped person search..."
      #default="{ item: person }"
  >
    <AisTypeAheadEntry
        :label="personService.format(person)"
        :context="person.department"
    />
  </AisTypeAhead>
</template>
