"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { TableListWrapper } from "./TableListComponent";
import { TableListConfigPanel } from "./TableListConfigPanel";
import { TableListConfig } from "./types";

/**
 * TableList 컴포넌트 정의
 * 데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트
 */
export const TableListDefinition = createComponentDefinition({
  id: "table-list",
  name: "테이블 리스트",
  nameEng: "TableList Component",
  description: "데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: TableListWrapper,
  defaultConfig: {
    // 표시 모드 설정
    displayMode: "table" as const,
    
    // 카드 모드 기본 설정
    cardConfig: {
      idColumn: "id",
      titleColumn: "name", 
      cardsPerRow: 3,
      cardSpacing: 16,
      showActions: true,
    },
    
    // 테이블 기본 설정
    showHeader: true,
    showFooter: true,
    height: "auto",

    // 체크박스 설정
    checkbox: {
      enabled: true,
      multiple: true,
      position: "left",
      selectAll: true,
    },

    // 컬럼 설정
    columns: [],
    autoWidth: true,
    stickyHeader: false,

    // 가로 스크롤 및 컬럼 고정 설정
    horizontalScroll: {
      enabled: true,
      maxVisibleColumns: 8, // 8개 컬럼까지는 스크롤 없이 표시
      minColumnWidth: 100,
      maxColumnWidth: 300,
    },

    // 페이지네이션
    pagination: {
      enabled: true,
      pageSize: 20,
      showSizeSelector: true,
      showPageInfo: true,
      pageSizeOptions: [10, 20, 50, 100],
    },

    // 필터 설정
    filter: {
      enabled: true,
      filters: [], // 사용자가 설정할 필터 목록
      bottomSpacing: 40, // 필터와 리스트 사이 간격 (px)
    },

    // 액션 설정
    actions: {
      showActions: false,
      actions: [],
      bulkActions: false,
      bulkActionList: [],
    },

    // 스타일 설정
    tableStyle: {
      theme: "default",
      headerStyle: "default",
      rowHeight: "normal",
      alternateRows: true,
      hoverEffect: true,
      borderStyle: "light",
    },

    // 데이터 로딩
    autoLoad: true,
  },
  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
  configPanel: TableListConfigPanel,
  icon: "Table",
  tags: ["테이블", "데이터", "목록", "그리드"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "https://docs.example.com/components/table-list",
});

// 컴포넌트는 TableListRenderer에서 자동 등록됩니다

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