import type { VNode } from 'vue'
import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkMcpSettingsDialog } from '../../../../ui/components/McpSettingsDialog'

export function renderMcpSettingsOverlay(ctx: ChatPageContext): VNode[] {
  const nodes: VNode[] = []

  const dialogNode = h(DimSdkMcpSettingsDialog, {
    modelValue: ctx.showMcpSettings.value,
    'onUpdate:modelValue': (v: boolean) => {
      ctx.showMcpSettings.value = v
    },
    w: ctx.mcpSettingsW.value,
    h: ctx.mcpSettingsH.value,
    mcpJsonFilePath: ctx.mcpJsonFilePath.value,
    serverCount: ctx.mcpServerCount.value,
    testStatus: ctx.mcpTestStatus.value,
    onOpenFile: ctx.openMcpFile,
    onReload: ctx.reloadMcpConfig,
    onTest: ctx.testMcpConnection,
    onClose: ctx.closeMcpSettings,
  })

  nodes.push(dialogNode)
  return nodes
}
