import { t } from '#cli/i18n'
import { TDialog, TText } from '@simon_he/vue-tui'
import { defineComponent, h } from 'vue'
import { useUiTheme } from '../theme'

export const DimSdkQueueConfirmDialog = defineComponent({
  name: 'DimSdkQueueConfirmDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    count: { type: Number, default: 0 },
    reason: { type: String, default: '' },
    w: { type: Number, default: 56 },
    h: { type: Number, default: 10 },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    confirm: () => true,
    pause: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    return () => {
      if (!props.modelValue) return null

      const dialogW = Math.max(40, Math.floor(props.w))
      const dialogH = Math.max(8, Math.floor(props.h))
      const innerW = Math.max(0, dialogW - 4)
      const innerH = Math.max(0, dialogH - 4)
      const bodyStyle = ui.style(['dialog.chrome'])
      const titleStyle = ui.style(['dialog.chrome', 'status.warning'])
      const mutedStyle = ui.style(['dialog.chrome', 'text.muted'])

      const reason = String(props.reason ?? '').trim()
      const title = t('chatQueue.confirm.title')
      const description = t('chatQueue.confirm.description', {
        count: Math.max(0, Math.floor(props.count ?? 0)),
      })
      const reasonText = reason ? t(`chatQueue.reason.${reason}` as any) : ''

      return h(
        TDialog as any,
        {
          modelValue: props.modelValue,
          'onUpdate:modelValue': (v: boolean) => emit('update:modelValue', v),
          onKeydownCapture: (e: any) => {
            if (e?.key === 'Escape') {
              e.preventDefault?.()
              e.stopPropagation?.()
              emit('pause')
              emit('update:modelValue', false)
              return
            }
            if (
              typeof e?.key === 'string' &&
              e.key.length === 1 &&
              !e.ctrlKey &&
              !e.metaKey &&
              !e.altKey
            ) {
              e.preventDefault?.()
              e.stopPropagation?.()
            }
          },
          w: dialogW,
          h: dialogH,
          title: title,
          placement: 'center',
          backdrop: false,
          padding: 1,
          style: ui.style(['dialog.chrome']),
          buttons: [
            { label: t('chatQueue.confirm.pause'), value: 'pause' },
            {
              label: t('chatQueue.confirm.continue'),
              value: 'confirm',
              kind: 'primary',
              default: true,
            },
          ],
          onConfirm: (btn: any) => {
            if (btn?.value === 'confirm') emit('confirm')
            else emit('pause')
            emit('update:modelValue', false)
          },
          onClose: () => emit('update:modelValue', false),
        },
        () => [
          h(TText, {
            x: 0,
            y: 0,
            w: innerW,
            h: innerH,
            value: '',
            style: bodyStyle,
          }),
          h(TText, {
            x: 0,
            y: 0,
            w: innerW,
            wrap: true,
            value: description,
            style: titleStyle,
          }),
          reasonText
            ? h(TText, {
                x: 0,
                y: 2,
                w: innerW,
                wrap: true,
                value: reasonText,
                style: mutedStyle,
              })
            : h(TText, {
                x: 0,
                y: 2,
                w: innerW,
                wrap: true,
                value: t('chatQueue.confirm.hint'),
                style: mutedStyle,
              }),
        ],
      )
    }
  },
})
