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

import FigureList from "@/components/list/figure-list";
import FigureListItem from "@/components/list/figure-list-item";
import { useDidShow } from "@tarojs/taro";
import { useEffect } from "react";

import RotateLoading from "@/components/rotate-loading";
import Taro from "@tarojs/taro";

import { useKnowledgeStore } from "@/store/knowledge";
import type { TKnowledgeItem } from "@/types/knowledge";
import { EKnowlegeTypes } from "@/consts/enum";
import KnowledgeIcon from "@/components/KnowledgeIcon";
import EmptyData from "@/components/empty-data";
export interface IProps {
  types?: EKnowlegeTypes[]
}
const Index = ({types}: IProps) => {
  
  const { listItems, listScrollTop, loadMoreList, initLoadList, setListTypes } = useKnowledgeStore();

  

  const onScrollToUpper = async () => {
    console.log('toUpper')
    loadMoreList()
  }

  useDidShow(()=> {
    loadMoreList(true)
  })

  useEffect(()=> {
    if(types){
      setListTypes(types)
    }
    initLoadList()
  }, [])

  const handleEdit = (item: TKnowledgeItem)=> {
    if(item.parseStatus !== 'parsed'){
      return ;
    }
    Taro.navigateTo({
      url: `/pages/knowledge-item/index?knowledgeId=${item.knowledgeId}`
    })
  }
  const rightRenderer = (item: TKnowledgeItem) => {
    if(item.parseStatus !== 'parsed'){
      return <></>
    }
    return (
      <View className="flex items-center gap-4">
        <RotateLoading />
        <View className="text-primary text-12">解析中</View>
      </View>
    );
  };

  return (
    <ScrollView
      scrollY
      onScrollToUpper={onScrollToUpper}
      scrollTop={listScrollTop}
      style={{
        flex: 1,
        height: "100%", // 高度自适应
      }}
    >
      {listItems.length<=0 ? <EmptyData type={2}/> : <></>}
      <FigureList>
      {listItems.map(item => {
        return <FigureListItem
            figure={()=> <KnowledgeIcon data={item}/>}
            underline
            arrow={item.parseStatus === 'parsed'}
            onClick={()=> handleEdit(item)}
            rightRenderer={()=> rightRenderer(item)}
          >
            <View className="flex flex-col flex-1 gap-2 w-full">
              <View className="text-14 leading-22">{item.title}</View>
              <View className="text-12 leading-20 text-gray-45">
              {item.createTime} | {item.fileSize}
              </View>
            </View>
          </FigureListItem>
      })}
      </FigureList>
    </ScrollView>
  );
};

export default Index;