import { ScrollView, View } from "@tarojs/components";
import { TAgentDetail } from "@/types/agent";
import { EVoiceStatus, EVoiceType, TGender, TVoiceItem } from "@/types/voice";
import VoiceList from '../VoiceList'
import {
  getVoices,
  cloneVoice as _cloneVoice,
} from "@/service/voice";
import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
import { useVoiceStore } from "@/store/voiceStore";

export default function Index({
  onPlay,
  onSelect,
  agent,
  key,
  type,
  gender,
}: {
  onPlay: (voice: any) => void;
  onSelect: (voice: any) => void;
  agent: Partial<TAgentDetail> | null;
  key: string
  type?: EVoiceType
  gender?: TGender
}) {

  const {entId} = useVoiceStore()

  const fetcher = async ([_url, {pageSize, pageIndex}, [entId, type, gender]])=> {
    const res = await getVoices({ pageSize, pageIndex, entId, type, gender})
    return res.data;
  }
  const { list, loadMore } = useLoadMoreInfinite<
    TVoiceItem[]
  >(createKey(`api/${key}/${entId}${type}${gender}`, 20, [entId, type, gender]), fetcher);
  const onScrollToLower = ()=> {
    loadMore()
  }
  return (
    <View className={`flex flex-col h-full`}>
      <ScrollView
        scrollY
        onScrollToLower={onScrollToLower}
        style={{
          flex: 1,
          height: "100%", // 高度自适应
        }}
      >
        <View className="px-16 py-12">
          <VoiceList
          agent={agent}
          list={list}
          onSelect={onSelect}
          onPlay={onPlay}
          >

          </VoiceList>
        </View>
      </ScrollView>
    </View>
  );
}
