<template>
	<div v-if="newList.length > 0" class="relative flex-1 overflow-y-auto overflow-x-hidden">
		<AlphabetIndex :newList="newList" @scrollToIndex="scrollToIndex" />
		<virtual-list ref="vsl" class="my_scrollbar h-full overflow-y-auto" :data-key="'userID'" :data-sources="newList"
			:data-component="
          (item: FriendUserItem | IndexItem) =>
            (item as IndexItem).title === undefined ? GenericListItem : LetterSection
        " :estimate-size="88" :extra-props="
          (item: FriendUserItem) => ({
            onClick: () => toUserCard(item),
            letterStr: (item as unknown as IndexItem).title,
          })
        " />
	</div>
	<CommonEmpty v-else />
</template>

<script setup lang="ts">
	import useContactStore from '@/store/modules/contact'
	import { formatContacts } from '@/utils/common'
	import CommonEmpty from '@/components/CommonEmpty/index.vue'
	import VirtualList from '@components/VirtualList'
	import AlphabetIndex from '../../myFriend/AlphabetIndex.vue'
	import LetterSection from '../../myFriend/LetterSection.vue'
	import type { FriendUserItem } from 'open-im-sdk-wasm/lib/types/entity'
	import GenericListItem from '@/components/GenericListItem/index.vue'



	type IndexItem = {
		title : string
		userID : string
	}

	const vsl = ref()
	const contactStore = useContactStore()

	const renderList = computed(() => formatContacts(contactStore.storeFriendList))

	const newList = ref<(FriendUserItem | IndexItem)[]>([])

	onActivated(() => {
		contactStore.getFriendListFromReq()
		console.log(contactStore.storeFriendList)
		console.log(formatContacts(contactStore.storeFriendList))
		newList.value = []
		renderList.value.indexList.map((_, i) => {
			newList.value.push({
				title: renderList.value.indexList[i],
				userID: renderList.value.indexList[i],
			})
			newList.value.push(...renderList.value.dataList[i])
		})
	})


	const toUserCard = (friend : FriendUserItem) => {
		contactStore.setUserCardData({
			baseInfo: friend,
		})
	}

	const scrollToIndex = (index : number) => {
		vsl.value.scrollToIndex(index)
	}
</script>

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