"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { RelatedDataButtonsComponent } from "./RelatedDataButtonsComponent";
import { RelatedDataButtonsConfigPanel } from "./RelatedDataButtonsConfigPanel";

/**
 * RelatedDataButtons 컴포넌트 정의
 * 좌측 패널에서 선택한 데이터를 기반으로 연관 테이블의 데이터를 버튼으로 표시
 */
export const RelatedDataButtonsDefinition = createComponentDefinition({
  id: "related-data-buttons",
  name: "연관 데이터 버튼",
  nameEng: "Related Data Buttons",
  description: "좌측 패널에서 선택한 데이터를 기반으로 연관 테이블의 데이터를 버튼으로 표시합니다. 예: 품목 선택 → 라우팅 버전 버튼들",
  category: ComponentCategory.DATA,
  webType: "container",
  component: RelatedDataButtonsComponent,
  defaultConfig: {
    sourceMapping: {
      sourceTable: "",
      sourceColumn: "",
    },
    headerDisplay: {
      show: true,
      titleColumn: "",
      subtitleColumn: "",
    },
    buttonDataSource: {
      tableName: "",
      filterColumn: "",
      displayColumn: "",
      valueColumn: "id",
      orderColumn: "created_date",
      orderDirection: "ASC",
    },
    buttonStyle: {
      variant: "outline",
      activeVariant: "default",
      size: "default",
      defaultIndicator: {
        column: "",
        showStar: true,
      },
    },
    addButton: {
      show: false,
      label: "+ 버전 추가",
      position: "header",
    },
    events: {
      targetTable: "",
      targetFilterColumn: "",
    },
    autoSelectFirst: true,
    emptyMessage: "데이터가 없습니다",
  },
  defaultSize: { width: 400, height: 120 },
  configPanel: RelatedDataButtonsConfigPanel,
  icon: "LayoutList",
  tags: ["버튼", "연관데이터", "마스터디테일", "라우팅"],
  version: "1.0.0",
  author: "개발팀",
});

// 타입 내보내기
export type { RelatedDataButtonsConfig, ButtonItem } from "./types";
export { RelatedDataButtonsComponent } from "./RelatedDataButtonsComponent";
export { RelatedDataButtonsConfigPanel } from "./RelatedDataButtonsConfigPanel";