<template>
	<div class="page_container">
		<NavBar :title="$t('profileMenu.blacklist')" />

		<virtual-list v-if="contactStore.storeBlackList.length > 0" class="my_scrollbar mt-3 flex-1 overflow-y-auto"
			:data-key="'userID'" :data-sources="contactStore.storeBlackList" :data-component="GenericListItem"
			:estimate-size="88" :extra-props="{
        total: contactStore.storeBlackList.length,
        showRemove: true,
        onRemove: blackRemove,
      }" />
		<CommonEmpty v-else />
	</div>
</template>

<script setup lang="ts">
	import NavBar from '@/components/NavBar/index.vue'
	import VirtualList from '@components/VirtualList'
	import GenericListItem from '@/components/GenericListItem/index.vue'
	import type { BlackUserItem } from 'open-im-sdk-wasm/lib/types/entity'
	import useContactStore from '@/store/modules/contact'
	import CommonEmpty from '@/components/CommonEmpty/index.vue'
	import { IMSDK } from '@/utils/imCommon'
	import { feedbackToast } from '@/utils/common'

	const contactStore = useContactStore()

	const blackRemove = ({ userID } : BlackUserItem) => {
		IMSDK.addFriend({
			toUserID: userID,
			reqMsg: '',
		})
		IMSDK.removeBlack(userID).catch((error) => feedbackToast({ error }))
	}
</script>

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