<script setup>
import { VCombobox } from "vuetify/components/VCombobox";
import { useLookupList } from "../../composables/lookupList";
import { useApiLookupList } from "../../composables/apiLookupList";
import { useLocalStorageModel } from "../../composables/localStorageModel";
const props = defineProps({
  serverSearch: { type: Boolean, required: false, default: false },
  serverSearchKey: { type: String, required: false },
  searchSearchSort: { type: Boolean, required: false, default: false },
  serverSearchDebounce: { type: Number, required: false, default: 500 },
  serverSearchText: { type: String, required: false, default: "Type to search\u2026" },
  serverSearchLoadingText: { type: String, required: false, default: "Searching\u2026" },
  modelSelectedItem: { type: String, required: false },
  modelSelectedItemBy: { type: Object, required: false },
  modelSelectedItemKey: { type: String, required: false },
  fuzzy: { type: Boolean, required: false, default: false },
  sortBy: { type: [String, Array], required: false },
  showCode: { type: Boolean, required: false, default: false },
  modelName: { type: String, required: true },
  modelBy: { type: Object, required: false },
  itemTitle: { type: String, required: true },
  itemValue: { type: String, required: true },
  fields: { type: Array, required: false },
  cache: { type: [Boolean, Number], required: false, default: false },
  filterKeys: { type: [String, Array], required: false },
  noDataText: { type: String, required: false },
  placeholder: { type: String, required: false },
  multiple: { type: Boolean, required: false },
  statusField: { type: String, required: false, default: "statusCode" },
  activeValue: { type: null, required: false, default: "active" },
  hideInactiveInList: { type: Boolean, required: false, default: false },
  preventSelectingInactive: { type: Boolean, required: false, default: false },
  persist: { type: Boolean, required: false },
  persistKey: { type: String, required: false },
  persistPrefix: { type: String, required: false },
  persistDebounce: { type: Number, required: false },
  persistClearOnEmpty: { type: Boolean, required: false },
  persistTtl: { type: Number, required: false },
  persistEncrypt: { type: Boolean, required: false },
  persistSecret: { type: String, required: false },
  persistAlwaysHydrate: { type: Boolean, required: false },
  api: { type: Boolean, required: false, default: false }
});
const emit = defineEmits(["update:selectedObject"]);
const selectedItems = defineModel({ type: null });
useLocalStorageModel(selectedItems, props);
const {
  searchData,
  computedItems,
  computedFilterKeys,
  computedPlaceholder,
  computedNoDataText,
  isLoading,
  isErrorLoading,
  onUpdateModelValue
  // ✅ from composable
} = props.api ? useApiLookupList(props, emit, selectedItems) : useLookupList(props, emit, selectedItems);
</script>

<template>
  <v-combobox
      :model-value="selectedItems"
      @update:model-value="onUpdateModelValue"
      v-model:search="searchData"
      v-bind="$attrs"
      :items="computedItems"
      :filter-keys="computedFilterKeys"
      :no-filter="props.fuzzy || props.serverSearch"
      :item-title="props.itemTitle"
      :item-value="props.itemValue"
      :loading="isLoading"
      :placeholder="computedPlaceholder"
      :no-data-text="computedNoDataText"
      :multiple="props.multiple"
      :return-object="false"
  >
    <!-- passthrough slots -->
    <!-- @ts-ignore -->
    <template v-for="(_, name, index) in $slots" :key="index" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}" />
    </template>

    <template v-if="!$slots.item" #item="{ props: itemProps }">
      <v-list-item v-bind="itemProps" :title="(props.showCode ? itemProps.value + '-' : '') + itemProps.title" />
    </template>

    <template v-if="!$slots.selection && props.showCode" #selection="{ internalItem }">
      {{ internalItem.value + "-" + internalItem.title }}
    </template>

    <template v-if="isErrorLoading" #append>
      <v-icon color="error">mdi mdi-alert</v-icon>
    </template>
  </v-combobox>
</template>
