"use client";

import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { TableListDefinition } from "./index";
import { TableListComponent } from "./TableListComponent";

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

  render(): React.ReactElement {
    return <TableListComponent {...this.props} renderer={this} onConfigChange={this.handleConfigChange} />;
  }

  // 설정 변경 핸들러
  protected handleConfigChange = (config: any) => {
    console.log("📥 TableListRenderer에서 설정 변경 받음:", config);

    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
    if (this.props.onConfigChange) {
      this.props.onConfigChange(config);
    } else {
      console.log("⚠️ 상위 컴포넌트에서 onConfigChange가 전달되지 않음");
    }

    this.updateComponent({ config });
  };

  /**
   * 컴포넌트별 특화 메서드들
   */

  // text 타입 특화 속성 처리
  protected getTableListProps() {
    const baseProps = this.getWebTypeProps();

    // text 타입에 특화된 추가 속성들
    return {
      ...baseProps,
      // 여기에 text 타입 특화 속성들 추가
    };
  }

  // 값 변경 처리
  protected handleValueChange = (value: any) => {
    this.updateComponent({ value });
  };

  // 포커스 처리
  protected handleFocus = () => {
    // 포커스 로직
  };

  // 블러 처리
  protected handleBlur = () => {
    // 블러 로직
  };
}

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

// 강제 등록 (디버깅용)
if (typeof window !== "undefined") {
  setTimeout(() => {
    try {
      TableListRenderer.registerSelf();
    } catch (error) {
      console.error("❌ TableList 강제 등록 실패:", error);
    }
  }, 1000);
}
