import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkConfigDialog } from '../../../../ui/components/ConfigDialog'
import { DimSdkLanguageDialog } from '../../../../ui/components/LanguageDialog'
import { DimSdkThemeDialog } from '../../../../ui/components/ThemeDialog'
import { DimSdkToolApprovalsDialog } from '../../../../ui/components/ToolApprovalsDialog'

export function renderSettingsOverlays(ctx: ChatPageContext) {
  return [
    h(DimSdkThemeDialog, {
      modelValue: ctx.showTheme.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showTheme.value = v),
      w: ctx.mdW.value,
      mode: ctx.themeMode.value,
      'onUpdate:mode': (v: string) => (ctx.themeMode.value = v),
      onApply: ctx.applyTheme,
      onCancel: ctx.closeTheme,
    }),

    h(DimSdkConfigDialog, {
      modelValue: ctx.showConfig.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showConfig.value = v),
      w: ctx.configW.value,
      h: ctx.configH.value,
      showToast: ctx.showCopyToast,
      contextWindow: ctx.contextWindow.value,
      contextWindowLocked: ctx.contextWindowLocked.value,
      'onUpdate:contextWindow': (v: string) => (ctx.contextWindow.value = v),
      maxTokens: ctx.maxTokens.value,
      'onUpdate:maxTokens': (v: string) => (ctx.maxTokens.value = v),
      temperature: ctx.temperature.value,
      'onUpdate:temperature': (v: string) => (ctx.temperature.value = v),
      interleavedThinking: ctx.interleavedThinking.value,
      interleavedThinkingLocked: ctx.interleavedThinkingLocked.value,
      'onUpdate:interleavedThinking': (v: boolean) =>
        (ctx.interleavedThinking.value = v),
      shortcutCommands: ctx.shortcutCommands.value,
      'onUpdate:shortcutCommands': (v: string) =>
        (ctx.shortcutCommands.value = v),
      shortcutTimeline: ctx.shortcutTimeline.value,
      'onUpdate:shortcutTimeline': (v: string) =>
        (ctx.shortcutTimeline.value = v),
      shortcutNewSession: ctx.shortcutNewSession.value,
      'onUpdate:shortcutNewSession': (v: string) =>
        (ctx.shortcutNewSession.value = v),
      onApply: ctx.applyConfig,
      onCancel: ctx.closeConfig,
    }),

    h(DimSdkLanguageDialog, {
      modelValue: ctx.showLanguage.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showLanguage.value = v),
      w: ctx.languageW.value,
      h: ctx.languageH.value,
      locale: ctx.locale.value,
      'onUpdate:locale': (v: string) => (ctx.locale.value = v),
      onApply: ctx.applyLanguage,
      onCancel: ctx.closeLanguage,
    }),

    h(DimSdkToolApprovalsDialog, {
      modelValue: ctx.showToolApprovals.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showToolApprovals.value = v),
      mode: String(ctx.store.state.approval.mode ?? 'auto') as any,
      w: ctx.toolApprovalsW.value,
      h: ctx.toolApprovalsH.value,
      onSelect: (v: 'auto' | 'normal' | 'strict') => {
        ctx.applyToolApprovals(v)
        ctx.showToolApprovals.value = false
      },
    }),
  ]
}
