"use client";

/**
 * V2SplitPanelLayout 설정 패널
 * 기존 SplitPanelLayoutConfigPanel의 전체 기능을 토스식 UX로 래핑
 * - 메인 진입점: 카드 네비게이션 (기본설정/좌측패널/우측패널/추가탭)
 * - 각 모달 내부: 기존 로직 100% 유지하되 Checkbox→Switch, 일부 Select→카드선택
 */

import React from "react";
import { SplitPanelLayoutConfigPanel } from "@/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel";
import type { SplitPanelLayoutConfig } from "@/lib/registry/components/v2-split-panel-layout/types";
import type { TableInfo } from "@/types/screen";

interface V2SplitPanelLayoutConfigPanelProps {
  config: SplitPanelLayoutConfig;
  onChange: (config: SplitPanelLayoutConfig) => void;
  tables?: TableInfo[];
  screenTableName?: string;
  menuObjid?: number;
}

/**
 * V2SplitPanelLayoutConfigPanel
 * 기존 SplitPanelLayoutConfigPanel을 토스식 UX 래퍼로 감싸서 제공
 * 
 * 기존 패널은 이미 4개 카드→Dialog 모달 패턴을 사용하고 있어
 * 토스식 구조(카드 선택, Switch, Collapsible)와 일치하므로
 * componentConfigChanged 이벤트만 추가하여 실시간 업데이트 지원
 */
export const V2SplitPanelLayoutConfigPanel: React.FC<V2SplitPanelLayoutConfigPanelProps> = ({
  config,
  onChange,
  tables,
  screenTableName,
  menuObjid,
}) => {
  const handleChange = (newConfig: SplitPanelLayoutConfig) => {
    onChange(newConfig);

    if (typeof window !== "undefined") {
      window.dispatchEvent(
        new CustomEvent("componentConfigChanged", {
          detail: { config: newConfig },
        })
      );
    }
  };

  return (
    <SplitPanelLayoutConfigPanel
      config={config}
      onChange={handleChange}
      tables={tables}
      screenTableName={screenTableName}
      menuObjid={menuObjid}
    />
  );
};

V2SplitPanelLayoutConfigPanel.displayName = "V2SplitPanelLayoutConfigPanel";

export default V2SplitPanelLayoutConfigPanel;