"use client";

import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { FlowWidgetDefinition } from "./index";
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
import { createComponentDefinition } from "../../utils/createComponentDefinition";

/**
 * FlowWidget 렌더러
 * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
 */
export class FlowWidgetRenderer extends AutoRegisteringComponentRenderer {
  // 먼저 Definition에 컴포넌트 설정
  static componentDefinition = (() => {
    // FlowWidgetRenderer를 컴포넌트로 설정
    const definition = { ...FlowWidgetDefinition, component: FlowWidgetRenderer };
    // createComponentDefinition으로 검증 및 처리
    return createComponentDefinition(definition as any);
  })();

  render(): React.ReactElement {
    console.log("🎨🎨🎨 FlowWidgetRenderer - render 호출 시작 🎨🎨🎨");
    console.log("🎨 FlowWidgetRenderer - render 호출:", {
      componentId: this.props.component.id,
      hasOnFlowSelectedDataChange: !!this.props.onFlowSelectedDataChange,
      onFlowSelectedDataChangeType: typeof this.props.onFlowSelectedDataChange,
      allPropsKeys: Object.keys(this.props),
      allPropsValues: this.props,
    });
    console.log("🎨🎨🎨 FlowWidget에 전달할 prop:", {
      hasComponent: !!this.props.component,
      hasOnSelectedDataChange: !!this.props.onFlowSelectedDataChange,
    });
    
    return (
      <FlowWidget 
        component={this.props.component as any} 
        onSelectedDataChange={this.props.onFlowSelectedDataChange}
      />
    );
  }
}

// 자동 등록 실행
FlowWidgetRenderer.registerSelf();

// Hot Reload 지원 (개발 모드)
if (process.env.NODE_ENV === "development") {
  FlowWidgetRenderer.enableHotReload();
}

console.log("✅ FlowWidget 컴포넌트 등록 완료");