"use client";

import { AutoRegisteringLayoutRenderer } from "../AutoRegisteringLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import { FlexboxLayoutDefinition } from "./index";
import { FlexboxLayout } from "./FlexboxLayout";

/**
 * flexbox 렌더러 (새 구조)
 */
export class FlexboxLayoutRenderer extends AutoRegisteringLayoutRenderer {
  /**
   * 레이아웃 정의 (자동 등록용)
   */
  static readonly layoutDefinition = FlexboxLayoutDefinition;

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

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

  /**
   * 플렉스 아이템의 flex 값을 계산합니다.
   */
  calculateFlexValue(zone: any, direction: string): string {
    // 존의 크기에 따라 flex 값 결정
    if (direction === "row" || direction === "row-reverse") {
      // 가로 방향: width를 기준으로 flex 값 계산
      if (typeof zone.size.width === "string") {
        if (zone.size.width.includes("fr")) {
          return zone.size.width.replace("fr", "");
        } else if (zone.size.width.includes("%")) {
          const percent = parseInt(zone.size.width.replace("%", ""));
          return `0 0 ${percent}%`;
        } else if (zone.size.width.includes("px")) {
          return `0 0 ${zone.size.width}`;
        }
      } else if (typeof zone.size.width === "number") {
        return `0 0 ${zone.size.width}px`;
      }
    } else {
      // 세로 방향: height를 기준으로 flex 값 계산
      if (typeof zone.size.height === "string") {
        if (zone.size.height.includes("fr")) {
          return zone.size.height.replace("fr", "");
        } else if (zone.size.height.includes("%")) {
          const percent = parseInt(zone.size.height.replace("%", ""));
          return `0 0 ${percent}%`;
        } else if (zone.size.height.includes("px")) {
          return `0 0 ${zone.size.height}`;
        }
      } else if (typeof zone.size.height === "number") {
        return `0 0 ${zone.size.height}px`;
      }
    }

    // 기본값: 균등 분할
    return "1";
  }
}

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

// 개발 모드에서 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(() => {
      FlexboxLayoutRenderer.unregisterSelf();
    });
  }
}