import type { ChatPageContext } from '../../context'
import { t } from '#cli/i18n'
import { h } from 'vue'
import { DimSdkCommandPalette } from '../../../../ui/components/CommandPalette'
import { DimSdkCustomProviderModelsDialog } from '../../../../ui/components/CustomProviderModelsDialog'
import { DimSdkCustomProviderModelsFetchDialog } from '../../../../ui/components/CustomProviderModelsFetchDialog'
import { DimSdkCustomProviderNameDialog } from '../../../../ui/components/CustomProviderNameDialog'
import { DimSdkProviderConnectDialog } from '../../../../ui/components/ProviderConnectDialog'

export function renderProviderOverlays(ctx: ChatPageContext) {
  return [
    h(DimSdkCommandPalette, {
      modelValue: ctx.showConnect.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showConnect.value = v),
      title: t('homePage.commandPalette.connect'),
      options: ctx.providerOptions.value,
      selectedIndex: ctx.providerIndex.value,
      'onUpdate:selectedIndex': (v: number) => (ctx.providerIndex.value = v),
      showRowDetails: true,
      onSelect: (v: string | null) => ctx.onSelectProvider(v),
      onClose: ctx.closeConnect,
    }),

    h(DimSdkCommandPalette, {
      modelValue: ctx.showCustomManage.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showCustomManage.value = v),
      title: ctx.customManageTitle.value,
      options: ctx.customManageOptions.value,
      selectedIndex: ctx.customManageIndex.value,
      'onUpdate:selectedIndex': (v: number) =>
        (ctx.customManageIndex.value = v),
      onSelect: (v: string | null) => ctx.onSelectCustomManage(v),
      onClose: ctx.closeCustomManage,
    }),

    h(DimSdkCommandPalette, {
      modelValue: ctx.showCustomDeleteConfirm.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.showCustomDeleteConfirm.value = v),
      title: ctx.customDeleteConfirmTitle.value,
      options: ctx.customDeleteConfirmOptions.value,
      selectedIndex: ctx.customDeleteConfirmIndex.value,
      'onUpdate:selectedIndex': (v: number) =>
        (ctx.customDeleteConfirmIndex.value = v),
      onSelect: (v: string | null) => ctx.onSelectCustomDeleteConfirm(v),
      onClose: ctx.closeCustomDeleteConfirm,
    }),

    h(DimSdkCommandPalette, {
      modelValue: ctx.showModels.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showModels.value = v),
      title: t('homePage.commandPalette.models'),
      options: ctx.modelOptions.value,
      selectedIndex: ctx.modelIndex.value,
      'onUpdate:selectedIndex': (v: number) => (ctx.modelIndex.value = v),
      showRowDetails: true,
      onSelect: (v: string | null) => ctx.onSelectModel(v),
      onClose: ctx.closeModels,
    }),

    h(DimSdkProviderConnectDialog, {
      modelValue: ctx.showConnectDialog.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showConnectDialog.value = v),
      w: ctx.configW.value,
      h: ctx.configH.value,
      providerName: ctx.connectProviderName.value,
      baseUrl: ctx.connectBaseUrl.value,
      'onUpdate:baseUrl': (v: string) => ctx.updateConnectBaseUrlDraft(v),
      apiKeyDraft: ctx.connectApiKeyDraft.value,
      'onUpdate:apiKeyDraft': (v: string) => (ctx.connectApiKeyDraft.value = v),
      apiKeyMasked: ctx.connectApiKeyMasked.value,
      canClearKey: ctx.connectCanClearKey.value,
      applying: ctx.connectApplying.value,
      focusKey: ctx.connectFocusKey.value,
      baseUrlMode: ctx.connectBaseUrlMode.value,
      showApiKey: true,
      baseUrlAfterApiKey: ctx.connectBaseUrlAfterApiKey.value,
      onApply: ctx.applyConnect,
      onClearKey: ctx.clearConnectKey,
      onCancel: ctx.cancelConnectDialog,
    }),

    h(DimSdkCommandPalette, {
      modelValue: ctx.showCustomType.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showCustomType.value = v),
      title: t('providerDialogs.addCustomLabel'),
      options: ctx.customTypeOptions.value,
      selectedIndex: ctx.customTypeIndex.value,
      'onUpdate:selectedIndex': (v: number) => (ctx.customTypeIndex.value = v),
      onSelect: (v: string | null) => ctx.onSelectCustomType(v),
      onClose: ctx.closeCustomType,
    }),

    h(DimSdkProviderConnectDialog, {
      modelValue: ctx.showCustomConnectDialog.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.showCustomConnectDialog.value = v),
      w: ctx.configW.value,
      h: ctx.configH.value,
      backdrop: false,
      providerName: t('providerDialogs.customLabel'),
      baseUrl: ctx.customConnectBaseUrl.value,
      'onUpdate:baseUrl': (v: string) => ctx.updateCustomConnectBaseUrlDraft(v),
      apiKeyDraft: ctx.customConnectApiKeyDraft.value,
      'onUpdate:apiKeyDraft': (v: string) =>
        (ctx.customConnectApiKeyDraft.value = v),
      apiKeyMasked: ctx.customConnectApiKeyMasked.value,
      focusKey: ctx.customConnectFocusKey.value,
      showBaseUrl: true,
      showApiKey: true,
      baseUrlAfterApiKey: false,
      onApply: ctx.applyCustomConnect,
      onCancel: ctx.cancelCustomConnectDialog,
    }),

    h(DimSdkCustomProviderModelsDialog, {
      modelValue: ctx.showCustomModelsDialog.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.showCustomModelsDialog.value = v),
      w: ctx.configW.value,
      h: ctx.configH.value,
      modelsDraft: ctx.customModelsDraft.value,
      'onUpdate:modelsDraft': (v: string) => (ctx.customModelsDraft.value = v),
      fetching: ctx.customModelsFetching.value,
      onFetch: ctx.openCustomModelsFetch,
      onApply: ctx.applyCustomModels,
      onCancel: ctx.cancelCustomModelsDialog,
    }),

    h(DimSdkCustomProviderModelsFetchDialog, {
      modelValue: ctx.showCustomModelsFetchDialog.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.showCustomModelsFetchDialog.value = v),
      w: ctx.configW.value,
      h: ctx.configH.value,
      options: ctx.customModelsFetchOptions.value as any,
      selectedIndices: ctx.customModelsFetchSelected.value,
      'onUpdate:selectedIndices': (v: number[]) =>
        (ctx.customModelsFetchSelected.value = v),
      onConfirm: ctx.applyCustomModelsFetch,
      onCancel: ctx.cancelCustomModelsFetchDialog,
    }),

    h(DimSdkCustomProviderNameDialog, {
      modelValue: ctx.showCustomNameDialog.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.showCustomNameDialog.value = v),
      w: ctx.configW.value,
      h: Math.max(10, Math.min(14, ctx.mdH.value)),
      nameDraft: ctx.customNameDraft.value,
      'onUpdate:nameDraft': (v: string) => (ctx.customNameDraft.value = v),
      onApply: ctx.applyCustomName,
      onCancel: ctx.cancelCustomNameDialog,
    }),
  ]
}
