<template>
  <a-select
    v-model:value="value"
    :allowClear="true"
    show-search
    style="width: 250px"
    :filter-option="false"
    placeholder="Select Item..."
    max-tag-count="responsive"
    :options="options"
    :loading="fetching"
    @popupScroll="handleScrollUserList"
    @search="onSearch"
    @focus="handleFocus"
    @change="onChange"
  ></a-select>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from 'vue'
import { debounce } from 'lodash-es'

type OptionItem = { [k: string]: any }

const props = defineProps<{
  modelValue?: any
}>()

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

const pager = reactive<{ page: number; size: number; total: number | null }>({
  page: 1,
  size: 20,
  total: null
})
const fetching = ref(false)
const keyword = ref('')
const internalList = ref<OptionItem[]>([])

// page size is stored in pager.size

const value = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})

const getLabel = (it: OptionItem) => {
  return String(it['label'] ?? '')
}

const getValue = (it: OptionItem, idx: number) => {
  return it['value'] ?? String(idx)
}

const options = computed(() => {
  return internalList.value.map((it, idx) => ({
    label: getLabel(it),
    value: getValue(it, idx),
    raw: it
  }))
})

const defaultFetch = async ({
  page: p,
  pageSize: ps,
  keyword: kw
}: {
  page: number
  pageSize: number
  keyword: string
}) => {
  const raw = sessionStorage.getItem('allCountry') || '[]'
  let list: OptionItem[] = []
  try {
    list = JSON.parse(raw)
    if (!Array.isArray(list)) list = []
  } catch (e) {
    list = []
  }

  // Return the raw list from sessionStorage exactly as-is (no slicing/filtering/delay)
  return { data: list, total: list.length }
}

const doFetch = async (reset = false) => {
  if (reset) pager.page = 1
  if (pager.total !== null && (pager.page - 1) * pager.size >= (pager.total ?? 0)) return
  fetching.value = true
  try {
    const res = await defaultFetch({
      page: pager.page,
      pageSize: pager.size,
      keyword: keyword.value
    })
    const data = res?.data ?? []
    pager.total = res?.total ?? null
    if (pager.page === 1) internalList.value = data
    else internalList.value = internalList.value.concat(data)
    pager.page += 1
  } finally {
    fetching.value = false
  }
}

const debouncedSearch = debounce((val: string) => {
  keyword.value = val
  emit('search', val)
  doFetch(true)
}, 300)

const onSearch = (val: string) => {
  debouncedSearch(val)
}

const handleScrollUserList = (e: Event) => {
  const target = e?.target as HTMLElement | null
  if (!target) return
  const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 40
  if (nearBottom && !fetching.value) {
    doFetch(false)
  }
}

const handleFocus = () => {
  // When focused, load first page (or reload with current keyword)
  doFetch(true)
}

const onChange = (val: any) => {
  emit('change', val)
  console.log('change---------', val)
}
</script>

<style lang="less" scoped></style>
