<script setup>
import {ref} from 'vue'
import {departmentList} from "@c/typeahead/examples/users";
import AisField from '@c/field/AisField.vue'
import AisSelect from '@c/select/AisSelect.vue'
import ScopedPersonSearch from './ScopedPersonSearch.vue'

const selectedDepartment = ref(undefined)
const selectedPerson = ref(undefined)
const selectedObject = ref(undefined)

const searchAllOption = {
  value: undefined, label: 'All departments', disabled: false
}
</script>

<template>
  <div class="grid gap-4">
    <AisField label="Department" description="Scope results to selected department">
      <AisSelect
          :defaultOption="searchAllOption"
          :options="departmentList()"
          v-model="selectedDepartment"
      />
    </AisField>
    <AisField label="Person Search" description="Type 'e' to see scoped results">
      <ScopedPersonSearch
          :department="selectedDepartment"
          v-model="selectedPerson"
          @load="selectedObject=$event"
          @change="selectedObject=$event"
      />
    </AisField>
    <div class="grid gap-4 bg-ui-gray-50 p-4">
      <div><span class="font-semibold">v-model:</span>{{ selectedPerson }}</div>
      <div><span class="font-semibold">@change:</span>{{ selectedObject }}</div>
    </div>
  </div>
</template>
