import type { VNode } from 'vue'
import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkToolSettingsDialog } from '../../../../ui/components/ToolSettingsDialog'

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

  const toolSettingsNode = h(DimSdkToolSettingsDialog, {
    modelValue: ctx.showToolSettings.value,
    'onUpdate:modelValue': (v: boolean) => {
      ctx.showToolSettings.value = v
    },
    w: ctx.toolSettingsW.value,
    h: ctx.toolSettingsH.value,
    apiKeyDraft: ctx.toolApiKeyDraft.value,
    apiKeyMasked: ctx.toolApiKeyMasked.value,
    'onUpdate:apiKeyDraft': (v: string) => {
      ctx.toolApiKeyDraft.value = v
    },
    onApply: () => ctx.applyToolSettings(),
    onCancel: () => {
      ctx.closeToolSettings()
    },
  })
  nodes.push(toolSettingsNode)

  return nodes
}
