import type { VNode } from 'vue'
import type { ChatPageContext } from '../../context'
import { t } from '#cli/i18n'
import { h } from 'vue'
import { DimSdkCommandPalette } from '../../../../ui/components/CommandPalette'
import { DimSdkToolSettingsDialog } from '../../../../ui/components/ToolSettingsDialog'

export function renderPluginsOverlay(ctx: ChatPageContext): VNode[] {
  return [
    h(DimSdkCommandPalette, {
      modelValue: ctx.showPlugins.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showPlugins.value = v),
      title: ctx.pluginsTitle.value,
      options: ctx.pluginsOptions.value,
      selectedIndex: ctx.pluginsIndex.value,
      showRowDetails: true,
      'onUpdate:selectedIndex': (v: number) => (ctx.pluginsIndex.value = v),
      onSelect: (v: string | null) => ctx.onPluginSelect(v),
      onClose: ctx.closePlugins,
    }),
    h(DimSdkToolSettingsDialog, {
      modelValue: ctx.showPluginConfig.value,
      'onUpdate:modelValue': (v: boolean) => {
        ctx.showPluginConfig.value = v
      },
      title: t('pluginsDialog.serperConfigTitle'),
      w: ctx.toolSettingsW.value,
      h: ctx.toolSettingsH.value,
      apiKeyDraft: ctx.pluginApiKeyDraft.value,
      apiKeyMasked: ctx.pluginApiKeyMasked.value,
      'onUpdate:apiKeyDraft': (v: string) => {
        ctx.pluginApiKeyDraft.value = v
      },
      onApply: () => ctx.applySerperConfig(),
      onCancel: () => ctx.closeSerperConfig(),
    }),
  ]
}
