import WemetaRadio from "@/components/wemeta-radio/index";
import { getSysVoiceList } from "@/service/audio";
import { useCharacterStore } from "@/store/characterStore";
import { TServiceAudioModel } from "@/types/index";
import { Image, View } from "@tarojs/components";
import { useEffect, useState } from "react";
import CardList from "@/components/list/card-list";
import CardListItem from "@/components/list/card-list-item";

type ExtendedTServiceAudioModel = TServiceAudioModel & { checked: boolean };
export default function Index({
  profileId,
  onPlay,
}: {
  profileId: string;
  onPlay: (voice: any) => void;
}) {
  const { saveCharacter } = useCharacterStore();
  const character = useCharacterStore((state) => state.character);
  const [list, setList] = useState<ExtendedTServiceAudioModel[]>([]);
  const [sysVoice, setSysVoice] = useState<ExtendedTServiceAudioModel | null>(
    null
  );

  const initPage = async () => {
    console.log("profileId: ", profileId);
    const res = await getSysVoiceList();

    if (res.code === 0 && res.data) {
      const r = res.data.map((item) => {
        item.checked = character?.defaultSystemVoice === item.voice;
        return item;
      }) as ExtendedTServiceAudioModel[];
      const checkedVoice = r.find((item) => !!item.checked);
      if (checkedVoice) {
        setSysVoice(checkedVoice);
      }
      setList(r);
    }
  };

  const handleSelect = async (voiceItem: ExtendedTServiceAudioModel) => {
    console.log("system voice select");

    const _list = list.map((item) => {
      return { ...item, checked: item.voice === voiceItem.voice };
    });

    setList(_list);

    setSysVoice(voiceItem);
    if (profileId) {
      saveCharacter({
        defaultSystemVoice: voiceItem.voice,
        voice: voiceItem.voice,
        profileId: profileId,
      });
    }
    // playerRef.current && playerRef.current.play(voiceItem.voice);
    onPlay && onPlay(voiceItem);
  };

  useEffect(() => {
    console.log("系统声音页面显示");
    initPage();
  }, [profileId]);

  return (
    <View className="w-full">
      <View className="flex flex-col w-full gap-28">
      <CardList>
          <View className="flex flex-col gap-12">
        {list.map((item: ExtendedTServiceAudioModel, index) => {
          // 与克隆语音是否相同
          const isEqualToClonedVoice = item.voice === character?.voice;
          return (
            <CardListItem
            underline
            rightRenderer={()=> {
              return <View className="flex items-center">
                <WemetaRadio
                  // checked={item.checked && isEqualToClonedVoice}
                  checked={ index === 0}
                ></WemetaRadio>
              </View>
            }}
            leftRenderer={()=> {
              return <Image
                src={item.avatar}
                mode="widthFix"
                className="w-56 h-56 rounded-12 shrink-0"
              ></Image>
            }}
          >
            <View
              className="flex gap-16 w-full"
              key={item.id}
              onClick={() => {
                handleSelect(item);
              }}
            >
              
              <View className="flex flex-1 flex-col gap-4 overflow-hidden">
                <View className="text-14 leading-22 font-medium text-black">
                  {item.name}
                </View>
                <View className="flex-1 text-12 leading-20 font-medium text-gray-45 truncate">
                  {item.gender === 1 ? "男" : "女"} {item.style}
                </View>
              </View>
            </View>
          </CardListItem>
          );
        })}
        </View>
        </CardList>
      </View>
    </View>
  );
}