import { ScrollView, View, Image, Text } from "@tarojs/components";

import Taro, { useDidShow } from "@tarojs/taro";
import { useEffect, useState } from "react";

import { TCorrectionItem } from "@/types/correction";
import { getCorrectionList } from "@/service/correction";
import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";

import IconA from "@/components/icon/IconA";
import IconQ from "@/components/icon/IconQ";
import CardEditable from "@/components/card/card-editable/index";

import { useModalStore } from "@/store/modalStore";

export interface Iprops {
  viewStyle: 'list'|'card'
  entId?: number|string
  setData: (value: any[])=> void
}
const Index = ({viewStyle, entId, setData}:Iprops) => {
  
  const { showModal } = useModalStore();

  const fetcher = async ([_url, {nextId, pageSize}, [_entId]]) => {
    const res = await getCorrectionList({ startId: nextId, pageSize, entId: _entId});
    return res.data;
  };

  
  const { list, loadMore, pageIndex } = useLoadMoreInfinite<TCorrectionItem>(
    createKey(`api/v1/my/correction/list${entId}`, 10, [entId]),
    fetcher);  

  const onScrollToUpper = async () => {
    console.log('toUpper')
    loadMore()
  }
  console.log('pageIndex', pageIndex, list)
  useEffect(() => {
    if(pageIndex === 1){
      console.log('setData', entId)
      setData(list);
    }
  }, [entId]);


  const handleEdit = (qaId: number | string) => {
    // Taro.navigateTo({
    //   url: `/pages/knowledge-item-editor/index?knowledgeId=${knowledgeId}&qaId=${qaId}&knowledgeTitle=${detail?.title}`,
    // });
  };
  
  // 删除问答项
  const handleDeleteItem = async (qaId: number | string) => {
    
    showModal({
      content: "确定删除该问答项吗？",
      onConfirm: async () => {
        // const { status } = await deleteKnowledgeQa(detail.knowledgeId, qaId);
        // if (isSuccess(status)) {
        //   Taro.showToast({ title: "删除成功", icon: "success" });
        //   getDetail(detail.knowledgeId);
        // }
      },
    });
  };


  const createCardOptions = (item: TCorrectionItem) => {
    return [
      // <View onClick={() => handleDeleteItem(item.id)}>
      //   删除
      // </View>,
      // <View onClick={() => handleEdit(item.id)}>编辑</View>,
    ]
  }
  return (
    <ScrollView
      scrollY
      onScrollToUpper={onScrollToUpper}
      style={{
        flex: 1,
        height: "100%", // 高度自适应
      }}
    >
    {list.map((item) => {
      return (
        <View className="flex flex-col gap-16 mb-16">
          <CardEditable
            buttons={createCardOptions(item)}
          >
            <View className="flex items-start mb-8 gap-8">
              <View className="flex-center h-28">
                <IconQ />
              </View>
              <View className="flex-1 font-medium text-14 leading-28">
                {item.questions[0]}
              </View>
            </View>

            <View className="flex items-start gap-8">
              <View className="flex-center  h-28">
                <IconA />
              </View>
              <View className="flex-1 text-12 leading-20 text-gray-45 truncate">
                <View className="truncate">{item.answer}</View>

                {!!item.links.length && (
                  <View className="pb-12">
                    {item.links.map((link) => {
                      return (
                        <View>
                          查看链接 <Text>{link}</Text>
                        </View>
                      );
                    })}
                  </View>
                )}
                {!!item.pics.length && (
                  <View className="pb-12">
                    {item.pics.map((pic) => {
                      return (
                        <View>
                          <Image
                            src={pic}
                            mode="widthFix"
                            className="w-full"
                          ></Image>
                        </View>
                      );
                    })}
                  </View>
                )}
              </View>
            </View>
          </CardEditable>
        </View>
      );
    })}
    </ScrollView>
  );
};

export default Index;
