"use client";

import React from "react";
import { Layers } from "lucide-react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { ComponentDefinition, ComponentCategory, ComponentRendererProps } from "@/types/component";
import { RepeaterInput } from "@/components/webtypes/RepeaterInput";
import { RepeaterConfigPanel } from "@/components/webtypes/config/RepeaterConfigPanel";

/**
 * Repeater Field Group 컴포넌트
 */
const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) => {
  const { component, value, onChange, readonly, disabled } = props;

  // repeaterConfig 또는 componentConfig에서 설정 가져오기
  const config = (component as any).repeaterConfig || component.componentConfig || { fields: [] };

  // 값이 JSON 문자열인 경우 파싱
  let parsedValue: any[] = [];
  if (typeof value === "string") {
    try {
      parsedValue = JSON.parse(value);
    } catch {
      parsedValue = [];
    }
  } else if (Array.isArray(value)) {
    parsedValue = value;
  }

  return (
    <RepeaterInput
      value={parsedValue}
      onChange={(newValue) => {
        // 배열을 JSON 문자열로 변환하여 저장
        const jsonValue = JSON.stringify(newValue);
        onChange?.(jsonValue);
      }}
      config={config}
      disabled={disabled}
      readonly={readonly}
      className="w-full"
    />
  );
};

/**
 * Repeater Field Group 렌더러
 * 여러 필드를 가진 항목들을 동적으로 추가/제거할 수 있는 컴포넌트
 */
export class RepeaterFieldGroupRenderer extends AutoRegisteringComponentRenderer {
  /**
   * 컴포넌트 정의
   */
  static componentDefinition: ComponentDefinition = {
    id: "repeater-field-group",
    name: "반복 필드 그룹",
    nameEng: "Repeater Field Group",
    description: "여러 필드를 가진 항목들을 동적으로 추가/제거할 수 있는 반복 가능한 필드 그룹",
    category: ComponentCategory.INPUT,
    webType: "array", // 배열 데이터를 다룸
    icon: Layers,
    component: RepeaterFieldGroupRenderer,
    configPanel: RepeaterConfigPanel,
    defaultSize: {
      width: 600,
      height: 400, // 여러 항목과 필드를 표시할 수 있도록 높이 설정
    },
    defaultConfig: {
      fields: [], // 빈 배열로 시작 - 사용자가 직접 필드 추가
      minItems: 1, // 기본 1개 항목
      maxItems: 20,
      addButtonText: "항목 추가",
      allowReorder: true,
      showIndex: true,
      collapsible: false,
      layout: "grid",
      showDivider: true,
      emptyMessage: "필드를 먼저 정의하세요.",
    },
    tags: ["repeater", "fieldgroup", "dynamic", "multi", "form", "array", "fields"],
    author: "System",
    version: "1.0.0",
  };

  /**
   * 컴포넌트 렌더링
   */
  render(): React.ReactElement {
    return <RepeaterFieldGroupComponent {...this.props} />;
  }
}

// 컴포넌트 자동 등록
RepeaterFieldGroupRenderer.registerSelf();

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