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

export const DimSdkPausedQueueDecisionDialog = defineComponent({
  name: 'DimSdkPausedQueueDecisionDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    count: { type: Number, default: 0 },
    draftSummary: { type: String, default: '' },
    w: { type: Number, default: 56 },
    h: { type: Number, default: 14 },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    continue: () => true,
    append: () => true,
    replace: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()

    return () => {
      if (!props.modelValue) return null

      const dialogW = Math.max(48, Math.floor(props.w))
      const dialogH = Math.max(11, 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 preview = String(props.draftSummary ?? '').trim()

      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('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: t('chatQueue.draftDecision.title'),
          placement: 'center',
          backdrop: false,
          padding: 1,
          style: ui.style(['dialog.chrome']),
          buttons: [
            { label: t('chatQueue.draftDecision.continue'), value: 'continue' },
            {
              label: t('chatQueue.draftDecision.append'),
              value: 'append',
              kind: 'primary',
              default: true,
            },
            { label: t('chatQueue.draftDecision.replace'), value: 'replace' },
          ],
          onConfirm: (btn: any) => {
            if (btn?.value === 'continue') emit('continue')
            else if (btn?.value === 'replace') emit('replace')
            else emit('append')
            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: t('chatQueue.draftDecision.description', {
              count: Math.max(0, Math.floor(props.count ?? 0)),
            }),
            style: titleStyle,
          }),
          h(TText, {
            x: 0,
            y: 2,
            w: innerW,
            wrap: true,
            value: preview
              ? `${t('chatQueue.draftDecision.previewLabel')} ${preview}`
              : t('chatQueue.draftDecision.previewLabel'),
            style: mutedStyle,
          }),
        ],
      )
    }
  },
})
