import { useEffect, useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import style from "./index.module.less";
import Popup from "@/components/popup/popup";
import WemetaTabs from "@/components/wemeta-tabs/index";
import KnowledgeList from "@/components/KnowledgeList";
import { EKnowlegeTypes } from "@/consts/enum";
import BottomBar from "@/components/BottomBar";
import WeComQRcode from '@/components/WeComQRcode'
import IconArrowDownRounded from "@/components/icon/IconArrowDownRounded";
import Taro from "@tarojs/taro";
import { useUserStore } from "@/store/userStore";
import { TKnowledgeItem } from "@/types/knowledge";
import { TEntItem } from "@/types/user";
import WemetaRadio from "@/components/WemetaRadio/index";
import EmptyData, { EmptyDataSubInfo, EmptyDataTitle } from "../EmptyData";
export interface IProps {
  show: boolean;
  multi?: boolean; // 是否多选
  title?: string; //弹层 title
  types?: EKnowlegeTypes[]; // 列表类型
  setShow: (show: boolean) => void;
  onPicked: (picked?: TKnowledgeItem[]) => void
}

export default function Index({title = '知识库',  show, setShow, multi, types, onPicked }: IProps) {
  const entList = useUserStore((state) => state.entList);
  const [ent, setEnt] = useState<TEntItem>();
  const [picked, setPicked] = useState<TKnowledgeItem[]>();

  // 当前选中的值
  const options = entList.map((item) => item.entName);
  // 是否显示选择器
  const [showPicker, setShowPicker] = useState(false);

  // 当前选中的值
  const [selected, setSelected] = useState(options[0]);

  const handleChange = (value: string) => {
    setSelected(value);
    const ent = entList.find((item) => item.entName === value);
    if (ent) {
      setEnt(ent);
    }
    setShowPicker(false)
  };

  const handleOnChange = (picked: TKnowledgeItem[]) => {
    setPicked(picked)
  };

  const handleSubmit = () => {
    console.log(picked)
    onPicked(picked)
    setShow(false)
  };

  useEffect(()=> {
    if(!ent){
      setEnt(entList[0])
      setSelected(entList[0]?.entName)
    }
  }, [entList])

  const renderEntContent = () => {

    if (!entList.length) {
      return (
        <View className="bg-gray-3 rounded-12 pt-44 h-full">
        <EmptyData type={'box'} className="mt-0">
          <EmptyDataTitle>开通企业知识库</EmptyDataTitle>
            <EmptyDataSubInfo>
              <View>让员工智能体高效运转，全公司知识自动同步</View>
              <View>客户咨询准确率提升80%+</View>
            </EmptyDataSubInfo>
            <View
              className="button-rounded button-primary-light button-border-primary button-inline-flex mt-20"
              onClick={() =>
                Taro.navigateTo({ url: "/pages/contact-us/index" })
              }
            >
              联系我们
            </View>
        </EmptyData>
      </View>
      );
    }

    return (
      <View className="h-full pb-40">
        <View
          className="flex items-center gap-2 bg-gray-3 rounded-12 p-12 mb-16"
          onClick={() => setShowPicker(true)}
        >
          <View className="flex-1 text-14 leading-22 text-gray-4">
            {selected}
          </View>
          <View className="flex-center">
            <IconArrowDownRounded />
          </View>
        </View>
        <KnowledgeList
          multi={multi}
          entId={ent?.entId}
          types={types}
          onChange={handleOnChange}
        ></KnowledgeList>
        <Popup title="选择企业" show={showPicker} setShow={setShowPicker}>
          <View className="flex flex-col gap-12 w-full overflow-y-auto max-h-[440px]">
            {options.map((item) => {
              return (
                <View
                  className="flex items-center rounded-8 bg-gray-3 px-16 py-20"
                  onClick={() => handleChange(item)}
                >
                  <View className="flex-1 text-black font-medium text-14 leading-22 font-pingfangSCMedium">
                    {item}
                  </View>
                  <WemetaRadio checkbox checked={selected === item} />
                </View>
              );
            })}
          </View>
        </Popup>
      </View>
    );
  };

  const tabList = [
    {
      key: "1",
      label: "个人",
      children: (
        <View className={style.tabContainer}>
          <KnowledgeList
            multi={multi}
            types={types}
            placeholder={()=> {
              return <View className={style.dataEmpty}>
                <WeComQRcode/>
              </View>
            }}
            onChange={handleOnChange}
          ></KnowledgeList>
        </View>
      ),
    },
    {
      key: "2",
      label: "企业",
      children: (
        <>
          <View className={style.tabContainer}>{renderEntContent()}</View>
        </>
      ),
    },
  ];

  return (
    <Popup setShow={setShow} show={show} title={title}>
      <WemetaTabs current="1" list={tabList}></WemetaTabs>
      <BottomBar>
        <View
          className="button-rounded button-primary flex-1"
          onClick={handleSubmit}
        >
          引用
        </View>
      </BottomBar>
    </Popup>
  );
}
