import WemetaRadio from "@/components/WemetaRadio/index";
import { Image, View } from "@tarojs/components";
import { useEffect, useState } from "react";
import CardListItem from "@/components/list/card-list-item";
import { TVoiceItem } from '@/types/voice'
import { TAgentDetail } from "@/types/agent";

export default function Index({
  onPlay,
  list,
  agent,
}: {
  onPlay: (voice: any) => void;
  list: TVoiceItem[]
  agent: TAgentDetail|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 ExtendedTVoiceItem[];
    //   const checkedVoice = r.find((item) => !!item.checked);
    //   if (checkedVoice) {
    //     setSysVoice(checkedVoice);
    //   }
    //   setList(r);
    // }
  };

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

    onPlay && onPlay(voiceItem);
  };

  useEffect(() => {
    initPage();
  }, []);

  return (
    <View className="w-full">
      <View className="flex flex-col w-full gap-28">
      <View>
          <View className="flex flex-col gap-12">
        {list.map((item: TVoiceItem, index) => {
          // 与克隆语音是否相同
          const isEqualToClonedVoice = item.voiceId === agent?.voiceId;
          return (
            <CardListItem
            underline
            rightRenderer={()=> {
              return <View className="flex items-center">
                <WemetaRadio
                  checked={isEqualToClonedVoice}
                ></WemetaRadio>
              </View>
            }}
          >
            <View
              className="flex gap-16 w-full py-16"
              key={item.voiceId}
              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.voiceName}
                </View>
                <View className="flex-1 text-12 leading-20 font-medium text-gray-45 truncate">
                  {item.gender === 'male' ? "男" : "女"}
                </View>
              </View>
            </View>
          </CardListItem>
          );
        })}
        </View>
        </View>
      </View>
    </View>
  );
}
