<script setup>
import { ref, useAttrs, computed, watch } from "vue";
import { useLightInputDefaults } from "../../composables/useLightProps";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  required: { type: Boolean, required: false },
  name: { type: null, required: false },
  virtualScrollHorizontal: { type: Boolean, required: false, skipCheck: true },
  virtualScrollSliceSize: { type: null, required: false },
  virtualScrollSliceRatioBefore: { type: null, required: false },
  virtualScrollSliceRatioAfter: { type: null, required: false },
  virtualScrollItemSize: { type: null, required: false },
  virtualScrollStickySizeStart: { type: null, required: false },
  virtualScrollStickySizeEnd: { type: null, required: false },
  tableColspan: { type: null, required: false },
  modelValue: { type: null, required: true },
  error: { type: [Boolean, null], required: false, skipCheck: true },
  errorMessage: { type: null, required: false },
  noErrorIcon: { type: Boolean, required: false, skipCheck: true },
  rules: { type: null, required: false },
  reactiveRules: { type: Boolean, required: false, skipCheck: true },
  lazyRules: { type: [Boolean, String], required: false, skipCheck: true },
  label: { type: null, required: false },
  stackLabel: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  hint: { type: null, required: false },
  hideHint: { type: Boolean, required: false, skipCheck: true },
  prefix: { type: null, required: false },
  suffix: { type: null, required: false },
  labelColor: { type: null, required: false },
  color: { type: null, required: false },
  bgColor: { type: null, required: false },
  dark: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
  loading: { type: Boolean, required: false, skipCheck: true },
  clearable: { type: Boolean, required: false, skipCheck: true },
  clearIcon: { type: null, required: false },
  filled: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  outlined: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  borderless: { type: Boolean, required: false, skipCheck: true },
  standout: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
  labelSlot: { type: Boolean, required: false, skipCheck: true },
  bottomSlots: { type: Boolean, required: false, skipCheck: true },
  hideBottomSpace: { type: Boolean, required: false, skipCheck: true, default: true },
  counter: { type: Boolean, required: false, skipCheck: true },
  rounded: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  square: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  dense: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  itemAligned: { type: Boolean, required: false, skipCheck: true },
  disable: { type: Boolean, required: false, skipCheck: true },
  readonly: { type: Boolean, required: false, skipCheck: true },
  autofocus: { type: Boolean, required: false, skipCheck: true },
  for: { type: null, required: false },
  multiple: { type: Boolean, required: false, skipCheck: true },
  displayValue: { type: null, required: false },
  displayValueHtml: { type: Boolean, required: false, skipCheck: true },
  options: { type: null, required: false },
  optionValue: { type: [Function, String], required: false, skipCheck: true },
  optionLabel: { type: [Function, String], required: false, skipCheck: true },
  optionDisable: { type: [Function, String], required: false, skipCheck: true },
  hideSelected: { type: Boolean, required: false, skipCheck: true },
  hideDropdownIcon: { type: Boolean, required: false, skipCheck: true },
  dropdownIcon: { type: null, required: false },
  maxValues: { type: null, required: false },
  optionsDense: { type: Boolean, required: false, skipCheck: true },
  optionsDark: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
  optionsSelectedClass: { type: null, required: false },
  optionsHtml: { type: Boolean, required: false, skipCheck: true },
  optionsCover: { type: Boolean, required: false, skipCheck: true },
  menuShrink: { type: Boolean, required: false, skipCheck: true },
  menuAnchor: { type: null, required: false },
  menuSelf: { type: null, required: false },
  menuOffset: { type: null, required: false },
  popupContentClass: { type: null, required: false },
  popupContentStyle: { type: null, required: false },
  popupNoRouteDismiss: { type: Boolean, required: false, skipCheck: true },
  useChips: { type: Boolean, required: false, skipCheck: true },
  useInput: { type: Boolean, required: false, skipCheck: true },
  maxlength: { type: null, required: false },
  fillInput: { type: Boolean, required: false, skipCheck: true },
  newValueMode: { type: null, required: false },
  mapOptions: { type: Boolean, required: false, skipCheck: true },
  disableTabSelection: { type: Boolean, required: false, skipCheck: true },
  emitValue: { type: Boolean, required: false, skipCheck: true },
  inputDebounce: { type: null, required: false, default: 0 },
  inputClass: { type: null, required: false },
  inputStyle: { type: null, required: false },
  tabindex: { type: null, required: false },
  autocomplete: { type: null, required: false },
  transitionShow: { type: null, required: false },
  transitionHide: { type: null, required: false },
  transitionDuration: { type: null, required: false },
  behavior: { type: null, required: false },
  onVirtualScroll: { type: Function, required: false },
  "onUpdate:modelValue": { type: Function, required: false },
  onFocus: { type: Function, required: false },
  onBlur: { type: Function, required: false },
  onClear: { type: Function, required: false },
  onInputValue: { type: Function, required: false },
  onRemove: { type: Function, required: false },
  onAdd: { type: Function, required: false },
  onNewValue: { type: Function, required: false },
  onFilter: { type: Function, required: false },
  onFilterAbort: { type: Function, required: false },
  onPopupShow: { type: Function, required: false },
  onPopupHide: { type: Function, required: false }
});
const model = defineModel({ type: [String, null] });
const attrs = useAttrs();
const L_KEYS = ["required"];
const toStringOptions = (opts) => {
  if (!opts || !Array.isArray(opts)) return [];
  return opts.map((v) => typeof v === "string" ? v : String(v));
};
const localOptions = ref(toStringOptions(props.options));
watch(() => props.options, (opts) => {
  localOptions.value = toStringOptions(opts);
});
const filterFn = (val, update) => {
  update(() => {
    const needle = val.toLocaleLowerCase();
    localOptions.value = toStringOptions(props.options).filter((v) => v.toLocaleLowerCase().includes(needle));
  });
};
const base = useLightInputDefaults(props, attrs, L_KEYS);
const selectProps = computed(() => ({
  ...base.value,
  options: localOptions.value
}));
</script>

<template>
    <q-select v-model="model" v-bind="selectProps"
        use-input fill-input hide-selected
        @filter="filterFn"
        @input-value="(val) => model = val">
        <template v-for="(_, name) in $slots" #[name]="slotProps" :key="name">
            <slot :name="name" v-bind="slotProps ?? {}" />
        </template>
    </q-select>
</template>
