import NavBarNormal from "@/components/nav-bar-normal";

import { Image, Text, View } from "@tarojs/components";
import Logo from "@/components/logo";
import SummaryBar from "./components/SummaryBar";
import { useAgentStore } from "@/store/agentStore";
import { useEffect, useState } from "react";
import { useComponentStore } from "@/store/componentStore";
import ComponentList from "@/components/component-list";
import { useUserStore } from "@/store/userStore";


interface IProps {
  agentId: string;
}
export default function Index({ agentId }: IProps) {
  const { fetchAgent } = useAgentStore();
  const { fetchMyEntList } = useUserStore();
  
  const { setComponentList } = useComponentStore()
  const components = useComponentStore((state) => state.components);

  const fetchAgentDetail = async (agentId: string) => {
    const result = await fetchAgent(agentId);
    if (result) {
      const components = result.components ?? []
      // 过滤掉没有 id 的组件防止有错误数据
      setComponentList(components.filter(c => !!c.data?.id), agentId);
    }
  };

  useEffect(() => {
    if (agentId) {
      fetchAgentDetail(agentId);
      
    }
  }, [agentId]);

  useEffect(()=> {
    fetchMyEntList()
  }, [])
  

  return (
    <View className="w-full">
      <NavBarNormal scrollFadeIn showBgColor leftColumn={Logo}></NavBarNormal>
      <SummaryBar></SummaryBar>
      <View className="flex flex-col w-full p-16 gap-12">
        <ComponentList components={components}></ComponentList>
      </View>
    </View>
  );
}