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

import FigureListItem from "@/components/list/FigureListItem";
import WemetaRadio from "@/components/WemetaRadio/index";

import IconFIleLink from "@/components/icon/IconFileLink";

import { useKnowledge } from "./knowledge";
import type { TKnowledgeItem } from "@/types/knowledge";
import { EKnowlegeTypes } from "@/consts/enum";
import { useDidShow } from "@tarojs/taro";
import { useEffect } from "react";

import EmptyData from "../EmptyData";
export interface IProps {
  multi?: boolean; // 是否多选
  types?: EKnowlegeTypes[]; // 列表类型
  entId?: string | number; // 企业id
  onChange: (value: TKnowledgeItem[]) => void;
  placeholder?: ()=> JSX.Element
}
const Index = ({ types, multi, entId, placeholder, onChange }: IProps) => {
  const {list, checkedValue, initLoad, setCheckedValue, loadMore } =
    useKnowledge({ types: types, entId });
  const onScrollToLower = async () => {
    loadMore();
  };

  useDidShow(() => {
    loadMore();
  });

  useEffect(() => {
    initLoad();
  }, [entId]);

  const handleClick = (item: TKnowledgeItem) => {
    let results: TKnowledgeItem[] = [];
    // 单选
    if (!multi) {
      const found = checkedValue.find(
        (_item) => _item.knowledgeId === item.knowledgeId
      );
      if (found) {
        setCheckedValue(results);
        onChange(results);
        return;
      }
      results = [item];
      setCheckedValue(results);
      onChange(results);
      return;
    }

    // 多选
    const found = checkedValue.find(
      (_item) => _item.knowledgeId === item.knowledgeId
    );
    if (found) {
      results = checkedValue.filter(
        (_item) => _item.knowledgeId != item.knowledgeId
      );
      setCheckedValue(results);
      onChange(results);
      return;
    }
    results = [...checkedValue, item];
    setCheckedValue(results);
    onChange(results);
  };
  const rightRenderer = (item: TKnowledgeItem) => {
    return (
      <View className="flex self-center">
        <WemetaRadio
          checkbox
          checked={
            !!checkedValue.find(
              (_item) => _item.knowledgeId === item.knowledgeId
            )
          }
        ></WemetaRadio>
      </View>
    );
  };

  const renderPlaceHolder = ()=> {
    if(placeholder){
      return <>{placeholder()}</>
    }
    return <View className="flex flex-col gap-8 items-center pt-45"> <EmptyData type={'search'}>
      <View className="text-gray-4 flex flex-col items-center">
        <View>暂无数据</View>
        <View>可在电脑端管理知识库</View>
      </View>
    </EmptyData>
    </View>
  }

  const renderFigure = (item: TKnowledgeItem) => {
    if(item.picUrl){
      return <View className="w-36 h-36 overflow-hidden"><Image className="w-36 h-36" src={item.picUrl} mode="widthFix" ></Image></View>
    }
    if(item.type === 'video' && item.ossPath){
      return <View className="w-36 h-36 overflow-hidden">
        <Video
        controls={false}
        showCenterPlayBtn={false}
        muted={true}
        objectFit="cover"
        className={`overflow-hidden shrink-0 w-36 h-36`}
        src={item.ossPath}
      />
      </View>
    }

    return <IconFIleLink />
  }

  return (
    <ScrollView
      scrollY
      onScrollToLower={onScrollToLower}
      style={{
        flex: 1,
        height: "100%", // 高度自适应
      }}
    >
      <View className="rounded-8 flex flex-col gap-12 h-full">
        <>
          {!list.length && ( renderPlaceHolder() )}
          {list.map((item) => {
            item.picUrl
            return (
              <FigureListItem
                figure={()=> renderFigure(item)}
                underline
                onClick={() => handleClick(item)}
                rightRenderer={() => rightRenderer(item)}
              >
                <View className="flex flex-col flex-1 gap-2 w-full overflow-hidden">
                  <View className="text-14 leading-22 truncate">
                    {item.title}
                  </View>
                  <View className="text-12 leading-20 text-gray-4">
                    {item.createTime} | {item.fileSizeStr}
                  </View>
                </View>
              </FigureListItem>
            );
          })}
        </>
      </View>
    </ScrollView>
  );
};

export default Index;
