import { ComponentConfig } from "../../types";

export const mapComponent: ComponentConfig = {
  type: "map",
  name: "지도",
  icon: "Map",
  category: "data-display",
  description: "DB 데이터를 지도에 마커로 표시합니다 (위도/경도 필요)",
  defaultSize: {
    width: 800,
    height: 600,
  },
  defaultConfig: {
    // 데이터 소스 설정
    dataSource: {
      type: "internal", // "internal" | "external"
      connectionId: null, // 외부 DB 연결 ID
      tableName: "",
      latColumn: "latitude", // 위도 컬럼명
      lngColumn: "longitude", // 경도 컬럼명
      labelColumn: "", // 마커 라벨 컬럼명
      statusColumn: "", // 상태 컬럼명 (마커 색상용)
      additionalColumns: [], // 추가 표시할 컬럼들
      whereClause: "", // WHERE 조건절
    },

    // 지도 설정
    mapConfig: {
      center: {
        lat: 36.5,
        lng: 127.5,
      },
      zoom: 7,
      minZoom: 5,
      maxZoom: 18,
    },

    // 마커 설정
    markerConfig: {
      showLabel: true,
      showPopup: true,
      clusterMarkers: false, // 마커 클러스터링
      statusColors: {
        default: "#3b82f6", // 기본 파란색
        active: "#22c55e", // 활성 녹색
        inactive: "#94a3b8", // 비활성 회색
        warning: "#f59e0b", // 경고 주황색
        danger: "#ef4444", // 위험 빨간색
      },
    },

    // 새로고침 설정
    refreshInterval: 30000, // 30초 (0이면 자동 새로고침 없음)
  },
  component: () => import("./MapComponent"),
  previewComponent: () => import("./MapPreviewComponent"),
  configPanel: () => import("./MapConfigPanel"),
};