"use client";

import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { V2SelectDefinition } from "./index";
import { V2Select } from "@/components/v2/V2Select";

/**
 * V2Select 렌더러
 * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
 */
export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
  static componentDefinition = V2SelectDefinition;

  render(): React.ReactElement {
    const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;

    // 컴포넌트 설정 추출
    const config = component.componentConfig || component.config || {};
    const columnName = component.columnName;
    const tableName = component.tableName || this.props.tableName;

    // formData에서 현재 값 가져오기 (기본값 지원)
    const defaultValue = config.defaultValue || "";
    let currentValue = formData?.[columnName] ?? component.value ?? "";

    // 🆕 formData에 값이 없고 기본값이 설정된 경우, 기본값 적용
    if (
      (currentValue === "" || currentValue === undefined || currentValue === null) &&
      defaultValue &&
      isInteractive &&
      onFormDataChange &&
      columnName
    ) {
      // 초기 렌더링 시 기본값을 formData에 설정
      setTimeout(() => {
        if (!formData?.[columnName]) {
          onFormDataChange(columnName, defaultValue);
        }
      }, 0);
      currentValue = defaultValue;
    }

    // 값 변경 핸들러
    const handleChange = (value: any) => {
      if (isInteractive && onFormDataChange && columnName) {
        onFormDataChange(columnName, value);
      }
    };

    // 🔧 DynamicComponentRenderer에서 전달한 style/size를 우선 사용 (height 포함)
    // restProps.style에 mergedStyle(height 변환됨)이 있고, restProps.size에도 size가 있음
    const effectiveStyle = restProps.style || component.style;
    const effectiveSize = restProps.size || component.size;

    // 🔍 디버깅: props 확인 (warn으로 변경하여 캡처되도록)
    console.warn("🔍 [V2SelectRenderer] props 디버깅:", {
      componentId: component.id,
      "component.style": component.style,
      "component.size": component.size,
      "restProps.style": restProps.style,
      "restProps.size": restProps.size,
      effectiveStyle,
      effectiveSize,
    });

    // 🔧 restProps에서 style, size 제외 (effectiveStyle/effectiveSize가 우선되어야 함)
    const { style: _style, size: _size, ...restPropsClean } = restProps as any;

    return (
      <V2Select
        id={component.id}
        label={component.label}
        required={component.required}
        readonly={config.readonly || component.readonly}
        disabled={config.disabled || component.disabled}
        value={currentValue}
        onChange={handleChange}
        config={{
          mode: config.mode || "dropdown",
          source: config.source || "distinct",
          multiple: config.multiple || false,
          searchable: config.searchable ?? true,
          placeholder: config.placeholder || "선택하세요",
          options: config.options || [],
          codeGroup: config.codeGroup,
          entityTable: config.entityTable,
          entityLabelColumn: config.entityLabelColumn,
          entityValueColumn: config.entityValueColumn,
        }}
        tableName={tableName}
        columnName={columnName}
        formData={formData}
        {...restPropsClean}
        style={effectiveStyle}
        size={effectiveSize}
      />
    );
  }
}

// 자동 등록 실행
V2SelectRenderer.registerSelf();

// Hot Reload 지원 (개발 모드)
if (process.env.NODE_ENV === "development") {
  V2SelectRenderer.enableHotReload();
}