"use client";

/**
 * V2ComponentRenderer
 * 
 * V2 컴포넌트를 동적으로 렌더링하는 컴포넌트
 * props.v2Type에 따라 적절한 컴포넌트를 렌더링
 */

import React, { forwardRef, useMemo } from "react";
import { 
  V2ComponentProps,
  isV2Input,
  isV2Select,
  isV2Date,
  isV2Text,
  isV2Media,
  isV2List,
  isV2Layout,
  isV2Group,
  isV2Biz,
  isV2Hierarchy,
} from "@/types/v2-components";
import { V2Input } from "./V2Input";
import { V2Select } from "./V2Select";
import { V2Date } from "./V2Date";
import { V2List } from "./V2List";
import { V2Layout } from "./V2Layout";
import { V2Group } from "./V2Group";
import { V2Media } from "./V2Media";
import { V2Biz } from "./V2Biz";
import { V2Hierarchy } from "./V2Hierarchy";

interface V2ComponentRendererProps {
  props: V2ComponentProps;
  className?: string;
}

/**
 * V2 컴포넌트 렌더러
 */
export const V2ComponentRenderer = forwardRef<HTMLDivElement, V2ComponentRendererProps>(
  ({ props, className }, ref) => {
    const component = useMemo(() => {
      // 타입 가드를 사용하여 적절한 컴포넌트 렌더링
      if (isV2Input(props)) {
        return <V2Input {...props} />;
      }

      if (isV2Select(props)) {
        return <V2Select {...props} />;
      }

      if (isV2Date(props)) {
        return <V2Date {...props} />;
      }

      if (isV2Text(props)) {
        // V2Text는 V2Input의 textarea 모드로 대체
        // 필요시 별도 구현
        return (
          <div className="p-2 border rounded text-sm text-muted-foreground">
            V2Text (V2Input textarea 모드 사용 권장)
          </div>
        );
      }

      if (isV2Media(props)) {
        return <V2Media {...props} />;
      }

      if (isV2List(props)) {
        return <V2List {...props} />;
      }

      if (isV2Layout(props)) {
        return <V2Layout {...props} />;
      }

      if (isV2Group(props)) {
        return <V2Group {...props} />;
      }

      if (isV2Biz(props)) {
        return <V2Biz {...props} />;
      }

      if (isV2Hierarchy(props)) {
        return <V2Hierarchy {...props} />;
      }

      // 알 수 없는 타입
      return (
        <div className="p-2 border border-destructive rounded text-sm text-destructive">
          알 수 없는 컴포넌트 타입: {(props as { v2Type?: string }).v2Type}
        </div>
      );
    }, [props]);

    return (
      <div ref={ref} className={className}>
        {component}
      </div>
    );
  }
);

V2ComponentRenderer.displayName = "V2ComponentRenderer";

export default V2ComponentRenderer;