<template>
  <GroupTrack v-if="!props.isWaiting" :room="room" :inviteData="inviteData" />

  <div v-if="isRecv && props.isWaiting && !isJoin" class="mt-[60px]">
    <div class="flex flex-row pl-6">
      <Avatar :size="48" :src="memberInfo.faceURL" :desc="memberInfo.nickname" />
      <div class="ml-4 text-white">
        <p>{{ memberInfo.nickname }} {{ $t('rtc.inviteYouVoice') }}</p>
        <p class="mt-1 text-sm">
          {{ $t('rtc.totalInVoice', { total: invitedList.length }) }}
        </p>
      </div>
    </div>

    <div class="mt-10 flex flex-row flex-wrap px-6">
      <div
        v-for="(item, i) in invitedList.slice(0, hasMore ? 11 : 12)"
        :key="item.userID"
        class="mt-2 flex w-1/6 items-center justify-center"
      >
        <Avatar :size="48" :src="item.faceURL" :desc="item.nickname" />
      </div>
      <div
        v-if="invitedList.length > 12"
        class="mt-2 flex w-1/6 items-center justify-center"
      >
        <div
          class="flex h-[48px] w-[48px] items-center justify-center rounded-md border border-[#8E9AB0]"
        >
          <div class="h-1 w-1 rounded-full bg-[#8E9AB0]"></div>
          <div class="mx-1 h-1 w-1 rounded-full bg-[#8E9AB0]"></div>
          <div class="h-1 w-1 rounded-full bg-[#8E9AB0]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { GroupMemberItem } from 'open-im-sdk-wasm/lib/types/entity'
import { Room } from 'livekit-client'

import GroupTrack from './GroupTrack.vue'
import useInviteData from '../useInviteData'
import { InviteData } from '../data'
import { IMSDK } from '@/utils/imCommon'
import useUserStore from '@/store/modules/user'

type IGroupProfileProps = {
  isWaiting: boolean
  room: Room
  inviteData: InviteData
}
const props = defineProps<IGroupProfileProps>()

const invitedList = ref<GroupMemberItem[]>([])

const userStore = useUserStore()
const { groupID, inviteeUserIDList, isRecv, memberInfo } = useInviteData(
  props.inviteData,
)

const isJoin = computed(() => props.inviteData.isJoin)
const hasMore = computed(() => invitedList.value.length > 12)

watch(
  () => inviteeUserIDList,
  () => {
    IMSDK.getSpecifiedGroupMembersInfo({
      groupID: groupID.value,
      userIDList: [...inviteeUserIDList.value],
    })
      .then(
        ({ data }) =>
          (invitedList.value = data.sort((a) =>
            a.userID === userStore.selfInfo.userID ? -1 : 1,
          )),
      )
      .catch(() => (invitedList.value = []))
  },
  {
    immediate: true,
  },
)
</script>
