import React, { createContext, useState, useContext, useEffect } from 'react';
import { createBaseComponents, registerComponentsFromDir } from './componentRegistry';

// 创建组件上下文
interface ComponentsContextType {
  components: Record<string, React.ComponentType<any>>;
  updateComponents: () => void;
}

const defaultContextValue: ComponentsContextType = {
  components: createBaseComponents(),
  updateComponents: () => {},
};

export const ComponentsContext = createContext<ComponentsContextType>(defaultContextValue);

// Provider组件
export const ComponentsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [components, setComponents] = useState(defaultContextValue.components);

  // 初始化时自动注册组件
  useEffect(() => {
    const initComponents = async () => {
      try {
        // 尝试使用动态方式注册所有组件
        await registerComponentsFromDir();
      } catch (error) {
        console.error('动态注册组件失败:', error);
      }
      
      // 更新组件列表
      updateComponents();
    };
    
    initComponents();
  }, []);

  const updateComponents = () => {
    const newComponents = createBaseComponents();
    setComponents(newComponents);
    console.log('组件列表已更新', Object.keys(newComponents));
  };

  return (
    <ComponentsContext.Provider value={{ components, updateComponents }}>
      {children}
    </ComponentsContext.Provider>
  );
};


export const useComponentsContext = () => useContext(ComponentsContext);