"use client";

import { AutoRegisteringLayoutRenderer } from "../AutoRegisteringLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import { GridLayoutDefinition } from "./index";
import { GridLayout } from "./GridLayout";

/**
 * 그리드 레이아웃 렌더러 (새 구조)
 */
export class GridLayoutRenderer extends AutoRegisteringLayoutRenderer {
  /**
   * 레이아웃 정의 (자동 등록용)
   */
  static readonly layoutDefinition = GridLayoutDefinition;

  /**
   * 클래스 로드 시 자동 등록 실행
   */
  static {
    this.registerSelf();
  }

  /**
   * 렌더링 실행
   */
  render(): React.ReactElement {
    return <GridLayout {...this.props} renderer={this} />;
  }
}

/**
 * React 함수 컴포넌트로 래핑 (외부 사용용)
 */
export const GridLayoutComponent: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new GridLayoutRenderer(props);
  return renderer.render();
};

// 기존 호환성을 위한 export
export { GridLayoutComponent as GridLayout };

// 개발 모드에서 Hot Reload 지원
if (process.env.NODE_ENV === "development") {
  // HMR API 등록
  if ((module as any).hot) {
    (module as any).hot.accept();
    (module as any).hot.dispose(() => {
      GridLayoutRenderer.unregisterSelf();
    });
  }
}