import { useEditor, useNode } from '@craftjs/core';
import { useEffect } from 'react';
import { NodeBox } from './components/NodeBox/index';
import { toAllPascalCase,toCamelCase} from './utils';
export interface ComponentConfig {
  component: React.ComponentType<any>;
  settings: React.ComponentType<any>;
  displayName: string;
  defaultProps: Record<string, any>;
}

// 定义craft属性类型
interface CraftConfig {
  displayName: string;
  related: {
    settings: React.ComponentType<any>;
  };
  props: Record<string, any>;
  resolvedName?: string;
}

// 定义组件包装器类型
interface ComponentWrapperType extends React.FC<any> {
  craft: CraftConfig;
  componentId?: string;
}

// 存储所有注册的组件
const componentRegistry: Record<string, ComponentConfig> = {};

// Function to register a component
export const registerComponent = (
  id: string,
  config: ComponentConfig
) => {
  componentRegistry[id] = config;
};

// 创建组件包装器
export const createComponentWrapper = (componentId: string) => {
  const config = componentRegistry[componentId];
  if (!config) {
    console.error(`组件ID不存在: ${componentId}`);
    return null;
  }

  const { component: Component, settings: Settings, displayName, defaultProps } = config;
  if (!Component) {
    console.error(`组件 ${componentId} 没有有效的 component 属性`);
    return null;
  }

  // 组件包装器
  const ComponentWrapper = (props: any) => {
    const {
      actions: { selectNode },
    } = useEditor();
    const {
      nodeId,
      props: nodeProps
    } = useNode((node) => ({
      nodeId: node.id,
      props: node.data.props,
    }));

    useEffect(() => {
      selectNode(nodeId);
    }, []);

    // 记录组件渲染
    console.log(`渲染组件 ${componentId} - nodeId: ${nodeId}`, props);

    return (
      <NodeBox id={nodeId}>
          <Component {...props}/>
      </NodeBox>
    );
  };

  // 设置组件属性
  const SettingsWrapper = () => {
    const {
      actions: { setProp },
      ...nodeProps
    } = useNode((node) => ({
      ...node.data.props,
    }));

    return <Settings {...nodeProps} setProp={setProp} />;
  };

  // Add craft configuration
  (ComponentWrapper as ComponentWrapperType).craft = {
    displayName,
    related: {
      settings: SettingsWrapper,
    },
    props: defaultProps,
  };
  
  // 设置一个自定义属性，确保我们能够识别这个组件
  (ComponentWrapper as ComponentWrapperType).componentId = componentId;

  return ComponentWrapper as ComponentWrapperType;
};

// Function to get all registered component IDs
export const getRegisteredComponentIds = (): string[] => {
  return Object.keys(componentRegistry);
};

// Function to get a registered component by ID
export const getRegisteredComponent = (id: string) => {
  return componentRegistry[id];
};

// 存储创建的组件包装器
export const wrapperComponents: Record<string, React.ComponentType<any>> = {};

// 动态导入并注册组件
export const registerComponentsFromDir = async () => {
  console.log('开始从目录动态导入并注册组件...');
  try {
    // 获取componentsDir目录下的所有文件夹
    const componentsContext = import.meta.glob('../components/*/index.{ts,tsx}', { eager: true });
    console.log('00,componentsContext', componentsContext)
    // 遍历所有组件
    for (const path in componentsContext) {
      // 从路径中提取组件名称
      const componentName = path.split('/').slice(-2)[0];
      // 去掉前缀Base获取组件ID
      // 获取组件模块
      const module = componentsContext[path] as any;
      const componentId = toAllPascalCase(componentName)
      const moduleName = module.Component ? 'Component' : componentId
      const settingsName = module.Settings ? 'Settings' : componentId + 'Settings'
      const defaultPropsName = module.defaultProps ? 'defaultProps' : toCamelCase(componentName) + 'DefaultProps'
      registerComponent(componentId, {
        component: module[moduleName],
        settings: module[settingsName],
        displayName: componentId,
        defaultProps: module[defaultPropsName] || {}
      });
    }
    return createBaseComponents()
  } catch (error) {
    console.error('动态导入并注册组件时出错:', error);
  }
};

// 创建组件
export const createBaseComponents = () => {
  const components: Record<string, React.ComponentType<any>> = {};
  // 获取所有注册的组件ID
  const componentIds = getRegisteredComponentIds();
  console.log('Creating base components for IDs:', componentIds);
  componentIds.forEach((id) => {
    const ComponentWrapper = createComponentWrapper(id);
    if (ComponentWrapper) {
      // 使用一致的命名约定
      const componentName = id;
      // 将组件包装器添加到组件对象
      components[componentName] = ComponentWrapper;
    } else {
      console.error(`Failed to create component wrapper for: ${id}`);
    }
  });
  
  console.log('Created components:', Object.keys(components));
  return components;
};