"use client";

import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { V2InputDefinition } from "./index";
import { V2Input } from "@/components/v2/V2Input";

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

  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 currentValue = formData?.[columnName] ?? component.value ?? "";

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

    // 라벨: style.labelText 우선, 없으면 component.label 사용
    // 🔧 style.labelDisplay를 먼저 체크 (속성 패널에서 style 객체로 업데이트하므로)
    const style = component.style || {};
    const labelDisplay = style.labelDisplay ?? (component as any).labelDisplay;
    // labelDisplay: true → 라벨 표시, false → 숨김, undefined → 기존 동작 유지(숨김)
    const effectiveLabel = labelDisplay === true ? (style.labelText || component.label) : undefined;

    return (
      <V2Input
        id={component.id}
        label={effectiveLabel}
        required={component.required}
        readonly={config.readonly || component.readonly}
        disabled={config.disabled || component.disabled}
        value={currentValue}
        onChange={handleChange}
        onFormDataChange={onFormDataChange}
        config={{
          type: config.inputType || config.webType || "text",
          inputType: config.inputType || config.webType || "text",
          placeholder: config.placeholder,
          format: config.format,
          min: config.min,
          max: config.max,
          step: config.step,
          rows: config.rows,
          autoGeneration: config.autoGeneration || component.autoGeneration,
        }}
        style={component.style}
        size={component.size}
        formData={formData}
        columnName={columnName}
        tableName={tableName}
        autoGeneration={config.autoGeneration || component.autoGeneration}
        originalData={(this.props as any).originalData}
        {...restProps}
      />
    );
  }
}

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

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