import WemetaTabs from "@/components/wemeta-tabs/index";
import VoicePlayerBar, { IVoicePlayerBar } from "@/components/voice-player-bar";
import ScrollVoiceList from "./components/ScrollVoiceList";
import MyVoiceList from "./components/MyVoiceList/index";
import { View } from "@tarojs/components";
import React, { useEffect, useRef, useState } from "react";
import NavBarNormal from "@/components/NavBarNormal/index";
import style from "./index.module.less";
import PageCustom from "@/components/page-custom/index";
import { useVoiceStore } from "@/store/voiceStore";
import { TVoiceItem } from "@/types/voice";
import { useAgentStore } from "@/store/agentStore";


interface Props {}

const VoiceTabs: React.FC<Props> = ({}) => {
  const playerRef = useRef<IVoicePlayerBar>(null);
  const [sysVoice, setSysVoice] = useState<TVoiceItem | null>(
    null
  );

  const {agent, agentCharacter, editAgentCharacter} = useAgentStore()

  const {
    getVoices,
  } = useVoiceStore();



  // 获取女声列表
  useEffect(() => {
    getVoices()
  }, [agent]);

  // 保存默认 voiceId
  const saveAgentVoiceId = async (voiceItem: TVoiceItem) => {
    if(!agent?.agentId || !voiceItem?.voiceId || !agentCharacter){
      return
    }
    const result = await editAgentCharacter(agent?.agentId, {
      ...agentCharacter,
      voiceId: voiceItem.voiceId
    })
    console.log(result)
  }

  // 设置当前播放器的播放音频信息
  const setPlayerItem = async (voiceItem: TVoiceItem, type: "system" | "cloned") => {
    setSysVoice(voiceItem);
    saveAgentVoiceId(voiceItem)
  };
  const onPlay = async (voiceItem: TVoiceItem, type: "system" | "cloned") => {
    if(playerRef.current){
      setSysVoice(voiceItem)
      playerRef.current.stop();
      playerRef.current.play(voiceItem.voiceUrl)
    }
  };



  const tabList = [
    {
      label: "我的",
      key: "1",
      children: (
        <View className="h-full">
          <MyVoiceList
          agent={agent}
          onSelect={(item) => {
            setPlayerItem(item, "cloned");
          }}
          onPlay={(item) => {
            onPlay(item, "cloned");
          }}
          ></MyVoiceList>
        </View>
      ),
    },
    {
      label: "全部",
      key: "2",
      children: (
        <View className="h-full bg-white">
          <ScrollVoiceList
            agent={agent}
            key="ScrollVoiceList"
            onSelect={(item) => {
              setPlayerItem(item, "system");
            }}
            onPlay={(item) => {
              onPlay(item, "system");
            }}
          >

          </ScrollVoiceList>
        </View>
      ),
    },
    {
      label: "女声",
      key: "3",
      children: (
        <View className="h-full bg-white">
          <ScrollVoiceList
            agent={agent}
            key="femaleVoice"
            gender="female"
            onSelect={(item) => {
              setPlayerItem(item, "system");
            }}
            onPlay={(item) => {
              onPlay(item, "system");
            }}
          >

          </ScrollVoiceList>
        </View>
      ),
    },
    {
      label: "男声",
      key: "4",
      children: (
        <View className="h-full bg-white">
          <ScrollVoiceList
            agent={agent}
            key="maleVoice"
            gender="male"
            onSelect={(item) => {
              setPlayerItem(item, "system");
            }}
            onPlay={(item) => {
              onPlay(item, "system");
            }}
          >

          </ScrollVoiceList>
        </View>
      ),
    },
  ];

  

  return (
    <PageCustom fullPage >
      <NavBarNormal backText="声音"></NavBarNormal>
      <View className={style.container}>
        <View className={style.playContainer}>
          <VoicePlayerBar
            ref={playerRef}
            voiceItem={sysVoice}
          />
        </View>
        <View className={style.voiceTab}>
          <WemetaTabs
            list={tabList}
            current="1"
            className="bg-white"
            tabStyle="outline"
          ></WemetaTabs>
        </View>
      </View>
    </PageCustom>
  );
};

export default VoiceTabs;
