<script setup lang="ts">
import { SpeakerWaveIcon } from "@/assets/Icons";
import { useLayoutStore, useTtsStore } from "@/stores";

const { text, messageId } = defineProps<{
  text: string;
  messageId: string;
}>();

const ttsStore = useTtsStore();
const layoutStore = useLayoutStore();
const { simpleMode } = storeToRefs(layoutStore);

// 获取当前消息的状态
const isPlaying = computed(() => ttsStore.isPlaying(messageId));
const isLoading = computed(() => ttsStore.isLoading(messageId));
const hasAudio = computed(() => ttsStore.hasAudio(messageId));

// 处理按钮点击
const handleClick = () => {
  if (isLoading.value) {
    return; // 合成中不响应点击
  }

  if (hasAudio.value) {
    // 如果音频已准备好，切换播放/暂停
    if (isPlaying.value) {
      ttsStore.pause(messageId);
    } else {
      ttsStore.play(messageId);
    }
  } else {
    // 如果没有音频，开始TTS转换
    ttsStore.convertText(text, messageId);
  }
};

// 文本改变清理之前的音频
watch(
  () => text,
  () => {
    ttsStore.clearAudio(messageId);
  }
);

onUnmounted(() => {
  ttsStore.clearAudio(messageId);
});
</script>

<template>
  <NPopover trigger="hover">
    <template #trigger>
      <NButton
        :loading="isLoading"
        @click="handleClick"
        quaternary
        circle
        :disabled="!text.trim()"
      >
        <SpeakerWaveIcon
          v-if="!isLoading"
          class="!w-4 !h-4"
          :class="{
            '': !simpleMode,
            'animate-pulse': isPlaying
          }"
        />
      </NButton>
    </template>
    <span>
      {{
        isLoading
          ? "合成中..."
          : isPlaying
            ? "点击暂停"
            : hasAudio
              ? "点击播放"
              : "语音合成"
      }}
    </span>
  </NPopover>
</template>
