import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkNextApiOAuthDialog } from '../../../../ui/components/NextApiOAuthDialog'
import { dialogSize } from '../../../../ui/utils/dialog-sizes'

export function renderNextApiOAuthOverlay(ctx: ChatPageContext) {
  const size = dialogSize('xl', ctx.cols.value, ctx.rows.value)
  const width = size.w
  const height = size.h

  return [
    h(DimSdkNextApiOAuthDialog, {
      modelValue: ctx.showNextApiOAuth.value,
      'onUpdate:modelValue': (v: boolean) => {
        if (!v) ctx.closeNextApiOAuth()
        else ctx.showNextApiOAuth.value = true
      },
      w: width,
      h: height,
      oauthStatus: ctx.nextApiOAuthStatus.value,
      oauthEmail: ctx.nextApiOAuthEmail.value,
      oauthUrl: ctx.nextApiOAuthUrl.value,
      oauthError: ctx.nextApiOAuthError.value,
      selectedModel: ctx.selectedNextApiModel.value,
      nextApiModels: ctx.nextApiModels.value,
      modelIndex: ctx.nextApiModelIndex.value,
      'onUpdate:selectedModel': (v: string) =>
        (ctx.selectedNextApiModel.value = v),
      'onUpdate:modelIndex': (v: number) => (ctx.nextApiModelIndex.value = v),
      onLogin: () => ctx.loginWithNextApiOAuth(),
      onLogout: () => ctx.logoutNextApiOAuth(),
      onClose: () => ctx.closeNextApiOAuth(),
      onSelectModel: (modelId: string) => ctx.selectNextApiModel(modelId),
      onViewPlans: () => ctx.viewNextApiPlans(),
    }),
  ]
}
