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

import EmptyData from "@/components/EmptyData";
import { useEffect, useState } from "react";

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

  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'}>
          <View className="text-center text-14 leading-28 text-gray-45 mb-44 w-full">
            <View className="text-center text-16 leading-24 font-medium text-black">
            开通企业知识库
            </View>
            <View>让员工智能体高效运转，全公司知识自动同步</View>
            <View>客户咨询准确率提升80%+</View>
            <View
              className="button-rounded button-primary-light button-border-primary button-inline-flex mt-24"
              onClick={() =>
                Taro.navigateTo({ url: "/pages/contact-us/index" })
              }
            >
              联系我们
            </View>
          </View>
        </EmptyData>
      </View>
    );
  }

  // 渲染公司选择器
  return (
    <PickerSingleColumn
      options={options}
      selected={selected}
      onPicked={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>
  );
};

export default Index;