<template>
  <div
    v-show="subtitleInfoList.length"
    :class="['ai-subtitle', customClass]"
    :style="[customStyle]"
  >
    <div v-for="(subtitleInfo, index) in subtitleInfoList" :key="subtitleInfo.roundId">
      <div v-if="index !== 0" style="height: 16px;"> </div>
      <div class="sender-name">{{ `${subtitleInfo?.nick || subtitleInfo?.sender}:` }}</div>
      <div>{{ subtitleInfo?.text }}</div>
      <div v-for="tranlationContent in subtitleInfo?.translation">
        <span>{{ `[${tranlationContent?.language}]: ${tranlationContent?.content}` }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from '../../../../adapter-vue';
import { aiAssistant, ASREvent } from './index';

defineProps({
  customClass: {
    type: String,
  },
  customStyle: {
    type: Object,
  },
})

const subtitleInfoList = ref([]);

const handleAISubtitle = (data: any) => {
  if (!data?.subtitleInfoList) return;

  subtitleInfoList.value = JSON.parse(JSON.stringify(data.subtitleInfoList));
};

onMounted(() => {
  aiAssistant.on(ASREvent.TRANSCRIPTION, handleAISubtitle);
})

onUnmounted(() => {
  aiAssistant.off(ASREvent.TRANSCRIPTION, handleAISubtitle);
})
</script>

<style lang="scss" scoped>
.ai-subtitle {
  position: absolute;
  z-index: 100;
  bottom: 110px;
  left: 50%;
  padding: 10px 12px;
  color: #fff;
  background-color: rgba(79, 88, 107, 0.7);
  border-radius: 8px;
  transform: translateX(-50%);
  width: 260px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sender-name {
  color: yellow;
}
</style>
