"use client";

import { ComponentConfig } from "@/types/component";

/**
 * SelectBasic 컴포넌트 설정 타입
 */
export interface SelectBasicConfig extends ComponentConfig {
  // select 관련 설정
  placeholder?: string;
  options?: Array<{ value: string; label: string }>;
  multiple?: boolean;

  // 코드 관련 설정
  codeCategory?: string;

  // 🆕 연쇄 드롭다운 설정
  /** 연쇄 관계 코드 (관계 관리에서 정의한 코드) */
  cascadingRelationCode?: string;
  /** 연쇄 드롭다운 역할: parent(부모) 또는 child(자식) */
  cascadingRole?: "parent" | "child";
  /** 부모 필드명 (자식 역할일 때, 화면 내 부모 필드의 columnName) */
  cascadingParentField?: string;
  
  // 🆕 계층구조 코드 설정
  /** 계층구조 코드 사용 여부 */
  useHierarchicalCode?: boolean;
  /** 계층구조 최대 깊이 (1, 2, 3) */
  hierarchicalMaxDepth?: 1 | 2 | 3;
  /** 각 단계별 라벨 */
  hierarchicalLabels?: [string, string?, string?];
  /** 각 단계별 placeholder */
  hierarchicalPlaceholders?: [string, string?, string?];
  /** 가로 배열 여부 */
  hierarchicalInline?: boolean;

  // 🆕 다중 컬럼 계층구조 설정 (테이블 타입관리에서 설정)
  /** 계층 역할: 대분류(large), 중분류(medium), 소분류(small) */
  hierarchyRole?: "large" | "medium" | "small";
  /** 상위 계층 필드명 (중분류는 대분류 필드명, 소분류는 중분류 필드명) */
  hierarchyParentField?: string;

  // 공통 설정
  disabled?: boolean;
  required?: boolean;
  readonly?: boolean;
  helperText?: string;

  // 스타일 관련
  variant?: "default" | "outlined" | "filled";
  size?: "sm" | "md" | "lg";

  // 이벤트 관련
  onChange?: (value: any) => void;
  onFocus?: () => void;
  onBlur?: () => void;
  onClick?: () => void;
}

/**
 * SelectBasic 컴포넌트 Props 타입
 */
export interface SelectBasicProps {
  id?: string;
  name?: string;
  value?: any;
  config?: SelectBasicConfig;
  className?: string;
  style?: React.CSSProperties;

  // 이벤트 핸들러
  onChange?: (value: any) => void;
  onFocus?: () => void;
  onBlur?: () => void;
  onClick?: () => void;
}
