ERP-node/frontend/lib/registry/components/WidgetRenderer.tsx

"use client";

import React from "react";
import { ComponentData, WidgetComponent } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Input } from "@/components/ui/input";
import { DynamicWebTypeRenderer } from "../DynamicWebTypeRenderer";

// 위젯 컴포넌트 렌더러
const WidgetRenderer: ComponentRenderer = ({ component, ...props }) => {
  // 위젯 컴포넌트가 아닌 경우 빈 div 반환
  if (component.type !== "widget") {
    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
  }

  const widget = component as WidgetComponent;
  const { widgetType, label, placeholder, required, readonly, columnName, style } = widget;

  // 디버깅: 실제 widgetType 값 확인
  console.log("WidgetRenderer - widgetType:", widgetType, "columnName:", columnName);

  // 사용자가 테두리를 설정했는지 확인
  const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);

  // 기본 테두리 제거 여부 결정 - Shadcn UI 기본 border 클래스를 덮어쓰기
  const borderClass = hasCustomBorder ? "!border-0" : "";

  const commonProps = {
    placeholder: placeholder || "입력하세요...",
    disabled: readonly,
    required: required,
    className: `w-full h-full ${borderClass}`,
  };

  // 동적 웹타입 렌더링 사용
  if (widgetType) {
    try {
      // 파일 위젯만 디자인 모드에서 인터랙션 허용
      // 이미지 위젯은 실행 모드(모달)에서만 업로드 가능하도록 함
      const isFileWidget = widgetType === "file";
      const isImageWidget = widgetType === "image" || widgetType === "img" || widgetType === "picture" || widgetType === "photo";
      const allowInteraction = isFileWidget;
      
      // 이미지 위젯은 래퍼 없이 직접 렌더링 (크기 문제 해결)
      if (isImageWidget) {
        return (
          <div className="pointer-events-none h-full w-full">
            <DynamicWebTypeRenderer
              webType={widgetType}
              props={{
                ...commonProps,
                component: widget,
                value: undefined, // 미리보기이므로 값은 없음
                readonly: readonly,
                isDesignMode: true, // 디자인 모드임을 명시
                ...props, // 모든 추가 props 전달 (sortBy, sortOrder 등)
              }}
              config={widget.webTypeConfig}
            />
          </div>
        );
      }
      
      return (
        <div className="flex h-full flex-col">
          <div className={allowInteraction ? "flex-1" : "pointer-events-none flex-1"}>
            <DynamicWebTypeRenderer
              webType={widgetType}
              props={{
                ...commonProps,
                component: widget,
                value: undefined, // 미리보기이므로 값은 없음
                readonly: readonly,
                isDesignMode: true, // 디자인 모드임을 명시
                ...props, // 모든 추가 props 전달 (sortBy, sortOrder 등)
              }}
              config={widget.webTypeConfig}
            />
          </div>
        </div>
      );
    } catch (error) {
      console.error(`웹타입 "${widgetType}" 렌더링 실패:`, error);
      // 오류 발생 시 폴백으로 기본 input 렌더링
      return (
        <div className="flex h-full flex-col">
          <div className="pointer-events-none flex-1">
            <Input type="text" {...commonProps} placeholder={`${widgetType} (렌더링 오류)`} />
          </div>
        </div>
      );
    }
  }

  // 웹타입이 없는 경우 기본 input 렌더링 (하위 호환성)
  return (
    <div className="flex h-full flex-col">
      <div className="pointer-events-none flex-1">
        <Input type="text" {...commonProps} />
      </div>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("widget", WidgetRenderer);

export { WidgetRenderer };