import { View } from "@tarojs/components";

import EmptyData, {
  EmptyDataTitle,
  EmptyDataSubInfo,
} from "@/components/EmptyData";
import { useEffect, useState } from "react";
import Popup from "@/components/popup/popup";
import WemetaRadio from "@/components/WemetaRadio/index";
import IconArrowDownRounded from "@/components/icon/IconArrowDownRounded";
import { useUserStore } from "@/store/userStore";
import Taro, { useDidShow } from "@tarojs/taro";
import { TEntItem } from "@/types/user";

// extraEnt 可额外传递预测的企业比如 自已构造一个 “个人知识库” 伪装成企业请求
// const extraEnt = [{
//   entName: '个人知识库',
//   entId: -1,
//   expireTime: '0',
//   isExpired: false,
//   knowledgeCnt: 0
// }]

interface IProps {
  extraEnt?: TEntItem[];
  currentEnt: TEntItem | null;
  setCurrentEnt: (ent: TEntItem) => void;
}

const Index = ({ currentEnt, setCurrentEnt, extraEnt = [] }: IProps) => {
  const { entList, fetchMyEntList } = useUserStore();

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

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

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

  useEffect(() => {
    // 如果没有设置过当前企业，且有企业列表，则设置一个默认的为当前企业
    console.log(currentEnt, allEnt, entList);
    if (!currentEnt && allEnt.length) {
      setSelected(allEnt[0].entName);
      setCurrentEnt(allEnt[0]);
    }
  }, [allEnt, entList, currentEnt]);

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

  // 如果没有公司
  if (!allEnt.length) {
    return (
      <View className="flex-center pt-22 w-full">
        <EmptyData type={"box"}>
          <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="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>
      <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>
    </>
  );
};

export default Index;
