import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkQueueConfirmDialog } from '../../../../ui/components/QueueConfirmDialog'

export function renderQueueConfirmOverlay(ctx: ChatPageContext) {
  return [
    h(DimSdkQueueConfirmDialog, {
      w: ctx.smW.value,
      h: ctx.smH.value,
      modelValue: ctx.queueConfirmVisible.value,
      'onUpdate:modelValue': (v: boolean) =>
        (ctx.queueConfirmVisible.value = v),
      count: ctx.queueItems.value.length,
      reason: ctx.queueConfirmReason.value
        ? String(ctx.queueConfirmReason.value)
        : '',
      onConfirm: ctx.confirmQueueResume,
      onPause: ctx.pauseQueueResume,
    }),
  ]
}
