"use client";

import React from "react";
import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
import { WebTypeComponentProps } from "@/lib/registry/types";

/**
 * EntitySearchInput 래퍼 컴포넌트
 * WebTypeRegistry에서 사용하기 위한 래퍼로,
 * 레지스트리 props를 EntitySearchInputComponent에 맞게 변환합니다.
 */
export const EntitySearchInputWrapper: React.FC<WebTypeComponentProps> = ({
  component,
  value,
  onChange,
  readonly = false,
  ...props
}) => {
  // component에서 필요한 설정 추출
  const widget = component as any;
  const webTypeConfig = widget?.webTypeConfig || {};
  const componentConfig = widget?.componentConfig || {};
  
  // 설정 우선순위: webTypeConfig > componentConfig > component 직접 속성
  const config = { ...componentConfig, ...webTypeConfig };
  
  // 테이블 타입 관리에서 설정된 참조 테이블 정보 사용
  const tableName = config.referenceTable || widget?.referenceTable || "";
  const displayField = config.labelField || config.displayColumn || config.displayField || "name";
  const valueField = config.valueField || config.referenceColumn || "id";
  
  // UI 모드: uiMode > mode 순서
  const uiMode = config.uiMode || config.mode || "select";
  
  // 다중선택 설정
  const multiple = config.multiple ?? false;

  // placeholder
  const placeholder = config.placeholder || widget?.placeholder || "항목을 선택하세요";

  console.log("🏢 EntitySearchInputWrapper 렌더링:", {
    tableName,
    displayField,
    valueField,
    uiMode,
    multiple,
    value,
    config,
  });

  // 테이블 정보가 없으면 안내 메시지 표시
  if (!tableName) {
    return (
      <div className="text-muted-foreground flex h-full w-full items-center rounded-md border border-dashed px-3 py-2 text-sm">
        테이블 타입 관리에서 참조 테이블을 설정해주세요
      </div>
    );
  }

  return (
    <EntitySearchInputComponent
      tableName={tableName}
      displayField={displayField}
      valueField={valueField}
      uiMode={uiMode}
      placeholder={placeholder}
      disabled={readonly}
      value={value}
      onChange={onChange}
      multiple={multiple}
      component={component}
      isInteractive={props.isInteractive}
      onFormDataChange={props.onFormDataChange}
      formData={props.formData}
      className="h-full w-full"
      style={widget?.style}
      {...props}
    />
  );
};

EntitySearchInputWrapper.displayName = "EntitySearchInputWrapper";