import React from 'react'
import { useComponentProps, injectExternals, loadRuntimeDependencies, mergeDependencies } from '@cloudbase/lowcode-render'

// Import dependencies entry
<%= entryImports %>

// Import Components
<%= componentImports %>

// Import Actions
<%= actionImports %>

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

const componentActionsMap = {
  <% useMaterialActions.forEach(action => {%>
    '<%= action.materialName %>:<%= action.name %>': <%= action.variableName %>,
  <% }) %>
}

const controlMap = <%= controlMap %>;

if(!window[`@weapps-materials-main-<%= OFFICIAL_LIB_KEY %>`]) {
  window[`@weapps-materials-main-<%= OFFICIAL_LIB_KEY %>`] = {
    actions: $$OFFICIAL_ACTION
  }
}

export async function loadDependencies() {
  injectExternals(window)
  const runtimeConfig = await loadRuntimeDependencies()
  return mergeDependencies([{
    controlMap,
    componentsMap,
    componentActionsMap
  }, runtimeConfig])
}