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 PickerSingleColumn from "@/components/Picker/PickerSingleColumn";

import IconArrowDownRounded from "@/components/icon/IconArrowDownRounded";
import Taro from "@tarojs/taro";
import { useUserStore } from "@/store/userStore";
import { TKnowledgeItem } from "@/types/knowledge";
export interface IProps {
  show: boolean;
  multi?: boolean; // 是否多选
  types?: EKnowlegeTypes[]; // 列表类型
  setShow: (show: boolean) => void;
  onPicked: (picked?: TKnowledgeItem[]) => void
}
type TEnt = { entId: string | number; entName: string };
export default function Index({ show, setShow, multi, types, onPicked }: IProps) {
  const entList = useUserStore((state) => state.entList);
  const [ent, setEnt] = useState<TEnt>();
  const [picked, setPicked] = useState<TKnowledgeItem[]>();

  

  // 如果没有当前企业，则默认第一个
  if (!ent) {
    setEnt(entList[0]);
  }

  // 当前选中的值
  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);
    }
  };

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

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

  const renderEntContent = () => {
    if (!entList.length) {
      return (
        <View className={style.dataEmpty}>
          {/* <Image
                showMenuByLongpress
                src="https://nexthuman.cn/api-web/img/wechat.9d5eaf4d.jpg"
                style={{ width: "160px", height: "160px" }}
              /> */}
          <View className="pt-20 text-center">
            <View className="leading-24 text-black font-medium text-16 mb-4">
              你还没有加入任何企业
            </View>
            <View className="leading-20 text-gray-45 mb-12">
              访问公司统一知识内容，提升回复效率与专业度
            </View>
            <View
              className="text-primary"
              onClick={() => {
                Taro.navigateTo({
                  url: "/pages/contact-us/index",
                });
              }}
            >
              联系我们
            </View>
          </View>
        </View>
      );
    }

    return (
      <View>
        <PickerSingleColumn
          options={options}
          selected={selected}
          onChange={handleChange}
          showPicker={showPicker}
          setShowPicker={setShowPicker}
        >
          <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-45">
              {selected}
            </View>
            <View className="flex-center">
              <IconArrowDownRounded />
            </View>
          </View>
        </PickerSingleColumn>
        <KnowledgeList
          multi={multi}
          entId={ent?.entId}
          types={types}
          onChange={handleOnChange}
        ></KnowledgeList>
      </View>
    );
  };

  const tabList = [
    {
      key: "1",
      label: "个人",
      children: (
        <View className={style.tabContainer}>
          {/* <View className={style.dataEmpty}>
            <Image
              showMenuByLongpress
              src="https://nexthuman.cn/api-web/img/wechat.9d5eaf4d.jpg"
              style={{ width: "160px", height: "160px" }}
            />
            <View className="pt-10 text-center">
              <View>添加小蓝本文档助手的企业微信</View>
              <View>随时随地上传文档</View>
            </View>
          </View> */}

          <KnowledgeList
            multi={multi}
            types={types}
            onChange={handleOnChange}
          ></KnowledgeList>
        </View>
      ),
    },
    {
      key: "2",
      label: "企业",
      children: (
        <>
          <View className={style.tabContainer}>{renderEntContent()}</View>
        </>
      ),
    },
  ];

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