import * as React from 'react';
import {
  generateCompositeComponent,
  useComponentProps,
  reverseUseComponentProps,
  loadRuntimeDependencies
} from '@cloudbase/lowcode-render';
<%= componentImports %>;
<%= actionImports %>

export default React.forwardRef((props, ref) => {
  const { events, $node, className, style, emit,$widget,compositeParent,isInComposite,forIndexes, data } = reverseUseComponentProps(props);
  const [compositeComponent, setCompositeComponent] = React.useState(null);

  const item = <%= template %>;
  const componentsMap = {
    <% useComponents.forEach(compItem => {%>
    '<%= compItem.moduleName %>:<%= compItem.name %>': React.forwardRef((props,ref) => {
      const processedProps = useComponentProps(props, <%= compItem.isPlainProps? 1:0 %>);
      return <<%= upperFirst(compItem.var) %> {...processedProps} ref={ref}/>
    }),
    <% }) %>
  };
  const componentActionsMap = {
    <% useMaterialActions.forEach(action => {%>
      '<%= action.materialName %>:<%= action.name %>': <%= action.variableName %>,
    <% }) %>
  };

  const componentsInfoMap = <%= componentsInfo %>

  React.useEffect(() => {
    const loadAndGenerateComponent = async () => {
      try {
        // 加载运行时依赖
        const { componentsMap: repeaterComponentsMap } = await loadRuntimeDependencies();
        Object.assign(componentsMap, repeaterComponentsMap);

        // 生成复合组件
        const compositeComponent = await generateCompositeComponent({
          sourceKey: "",
          comp: item,
          module: '<%= materialName %>',
          componentsMap,
          componentActionsMap,
          componentsInfoMap,
          options: {
            enablePageRootId: true,
            lowcodeContext: {},
            looseError: true,
            processCssUnit: "px",
            disablePageComponentInvoke: true,
          },
        });

        // 设置复合组件
        setCompositeComponent(compositeComponent);
      } catch (error) {
        console.error("Error loading and generating component:", error);
      }
    };

    loadAndGenerateComponent();
  }, []);

  if (!compositeComponent) {
    return <></>;
  }
  const CompositeComponent = compositeComponent;

  return (
      <CompositeComponent
      events={events}
      $node={$node}
      $widget={$widget}
      compositeParent={compositeParent}
      isInComposite={isInComposite}
      forIndexes={forIndexes}
      className={className}
      style={style}
      data={data}
      ref={ref}
      emit={emit}
      ></CompositeComponent>
  );
});