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";
import EmptyData from "@/components/EmptyData";

export default function Index({
  onPlay,
  onSelect,
  list,
  agent,
}: {
  onPlay: (voice: any) => void;
  onSelect: (voice: any) => void;
  list: TVoiceItem[];
  agent: TAgentDetail | null;
}) {


  const handleSelect = async (voiceItem: TVoiceItem) => {
    console.log(voiceItem,33)
    onSelect(voiceItem);
  };

  const handleTry = (e:any, voiceItem: TVoiceItem)=> {
    e.stopPropagation()
    onPlay && onPlay(voiceItem);
  }

  const renderGender = (voiceItem: TVoiceItem)=> {
    if(voiceItem.gender === 'male'){
      return '男'
    }
    if(voiceItem.gender === 'female'){
      return '女'
    }
    return ''
  }

  return (
    <View className="w-full">
      <View className="flex flex-col w-full gap-28">
        <View>
          <View className="flex flex-col">
            {!list.length && <EmptyData type={'search'}></EmptyData>}
            {list.map((item: TVoiceItem, index, array) => {
              // 与克隆语音是否相同
              const isEqualToClonedVoice = item.voiceId === agent?.voiceId;
              const isLast = index === array.length - 1
              return (
                <CardListItem
                  underline={!isLast}
                  rightRenderer={() => {
                    return (
                      <View className="flex items-center" onClick={() => {
                        handleSelect(item);
                      }}>
                        <View className="text-primary px-12 text-12" onClick={(e)=> handleTry(e, item)}>试听</View>
                        <WemetaRadio
                          checkbox
                          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-4 truncate">
                        {renderGender(item)}
                      </View>
                    </View>
                  </View>
                </CardListItem>
              );
            })}
          </View>
        </View>
      </View>
    </View>
  );
}
