/**
 * 조건부 컨테이너 컴포넌트
 * 제어 셀렉트박스 값에 따라 다른 UI를 표시하는 컨테이너
 */

import { ComponentDefinition, ComponentCategory } from "@/types/component";

export const ConditionalContainerDefinition: Omit<
  ComponentDefinition,
  "renderer" | "configPanel" | "component"
> = {
  id: "conditional-container",
  name: "조건부 컨테이너",
  category: ComponentCategory.LAYOUT,
  webType: "container" as const,
  description: "셀렉트박스 값에 따라 다른 UI를 표시하는 조건부 컨테이너",
  icon: "GitBranch",
  version: "1.0.0",
  author: "WACE",
  tags: ["조건부", "분기", "동적", "레이아웃"],

  defaultSize: {
    width: 1400,
    height: 800,
  },

  defaultConfig: {
    controlField: "condition",
    controlLabel: "조건 선택",
    sections: [
      {
        id: "section_1",
        condition: "option1",
        label: "옵션 1",
        screenId: null,
      },
      {
        id: "section_2",
        condition: "option2",
        label: "옵션 2",
        screenId: null,
      },
    ],
    defaultValue: "option1",
    showBorder: true,
    spacing: "normal",
  },

  defaultProps: {
    style: {
      width: "1400px",
      height: "800px",
    },
  },

  configSchema: {
    controlField: {
      type: "string",
      label: "제어 필드명",
      defaultValue: "condition",
    },
    controlLabel: {
      type: "string",
      label: "셀렉트박스 라벨",
      defaultValue: "조건 선택",
    },
    sections: {
      type: "array",
      label: "조건별 섹션",
      defaultValue: [],
    },
    defaultValue: {
      type: "string",
      label: "기본 선택 값",
      defaultValue: "",
    },
    showBorder: {
      type: "boolean",
      label: "섹션 테두리 표시",
      defaultValue: true,
    },
    spacing: {
      type: "select",
      label: "섹션 간격",
      options: [
        { label: "좁게", value: "tight" },
        { label: "보통", value: "normal" },
        { label: "넓게", value: "loose" },
      ],
      defaultValue: "normal",
    },
  },
};

export default ConditionalContainerDefinition;