import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal";

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

import style from './index.module.less'


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

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

  useEffect(()=> {
    const components = agent?.components ?? []
    // 过滤掉没有 id 的组件防止有错误数据
    setComponentList(components.filter(c => !!c.data?.id), agentId);
  }, [agent])

  useEffect(()=> {
    fetchMyEntList()
  }, [])
  
  // 自定义背景样式
  const bgImageStyle = {
    backgroundImage: `url(${agent?.avatarUrl})`,
  };
  return (
    <PageCustom styleBg={bgImageStyle}>
      <NavBarNormal leftColumn={Logo}></NavBarNormal>
      <View className={style.blurBg}>
        {(!!agent) ? <SummaryBar isVisitor={false} agent={agent}></SummaryBar> : <></>}
        <View className={`flex flex-col gap-12 w-full p-16`}>
          <ComponentList components={components}></ComponentList>
        </View>
      </View>
    </PageCustom>
  );
}