<template>
  <div
    :style="{ width: size + 'px', height: size + 'px' }"
    class="relative overflow-hidden rounded-md"
  >
    <VideoTrack
      v-if="isVideo && !isVideoMuted"
      :track-ref="track"
      :style="{ width: size + 'px', height: size + 'px', 'object-fit': 'cover' }"
    />
    <Avatar v-else :size="size" :src="memberInfo.faceURL" :desc="memberInfo.nickname" />
    <AudioTrack v-if="!isVideo" :track-ref="track" />
    <div
      class="absolute bottom-1 right-1 z-[22] flex h-[22px] min-w-[22px] items-center justify-center rounded-md bg-[#4C4C4E] bg-opacity-30"
    >
      <!-- <div class="text-white">{{ memberInfo.nickname }}</div> -->
      <img
        class="h-4 w-4"
        :src="isMicMuted ? user_mic_close : user_mic_open"
        alt="user_mic"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import user_mic_open from '@/assets/images/rtc/user_mic_open.png'
import user_mic_close from '@/assets/images/rtc/user_mic_close.png'
import { useIsMuted, VideoTrack, AudioTrack } from '@/utils/open-im-rtc'
import type { TrackReference } from '@livekit/components-core'
import type { GroupMemberItem } from 'open-im-sdk-wasm/lib/types/entity'
import { Track } from 'livekit-client'

type GroupTrackItemProps = {
  size: number
  track: TrackReference
  isVideo: boolean
}
const props = defineProps<GroupTrackItemProps>()

const isVideoMuted = useIsMuted(props.track)
const isMicMuted = useIsMuted({
  participant: props.track.participant,
  source: Track.Source.Microphone,
})

const memberInfo = computed(() => {
  const metadata = props.track.participant.metadata
  if (!metadata) {
    return {} as GroupMemberItem
  }
  const parsedData = JSON.parse(metadata)
  return parsedData.groupMemberInfo as GroupMemberItem
})
</script>
