"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { TableGroupedComponent } from "./TableGroupedComponent";
import { TableGroupedConfigPanel } from "./TableGroupedConfigPanel";
import { TableGroupedConfig } from "./types";

/**
 * V2 그룹화 테이블 컴포넌트 Definition
 *
 * 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공합니다.
 * v2-table-list를 기반으로 확장된 컴포넌트입니다.
 */
export const V2TableGroupedDefinition = createComponentDefinition({
  id: "v2-table-grouped",
  name: "그룹화 테이블",
  nameEng: "Grouped Table Component",
  description: "데이터를 그룹화하여 접기/펼치기 기능을 제공하는 테이블",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: TableGroupedComponent,
  defaultConfig: {
    // 테이블 설정
    selectedTable: "",
    useCustomTable: false,
    customTableName: "",

    // 그룹화 설정
    groupConfig: {
      groupByColumn: "",
      groupLabelFormat: "{value}",
      defaultExpanded: true,
      sortDirection: "asc",
      summary: {
        showCount: true,
        sumColumns: [],
      },
    },

    // 컬럼 설정
    columns: [],

    // 체크박스 설정
    showCheckbox: false,
    checkboxMode: "multi",

    // 페이지네이션 설정
    pagination: {
      enabled: false,
      pageSize: 10,
    },

    // UI 설정
    isReadOnly: false,
    rowClickable: true,
    showExpandAllButton: true,
    groupHeaderStyle: "default",
    emptyMessage: "데이터가 없습니다.",
    height: "auto",
    maxHeight: 600,
  },
  defaultSize: { width: 800, height: 500 },
  configPanel: TableGroupedConfigPanel,
  icon: "Layers",
  tags: ["테이블", "그룹화", "접기", "펼치기", "목록"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "",
});

// 타입 내보내기
export type { TableGroupedConfig } from "./types";