import { t } from '#cli/i18n'
import { TDialog, TInput, TText } from '@simon_he/vue-tui'
import { defineComponent, h, ref, watch } from 'vue'
import { useUiTheme } from '../theme'
import { withFocusedInputTip } from './input-clear-tip'

export const DimSdkCustomProviderNameDialog = defineComponent({
  name: 'DimSdkCustomProviderNameDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    w: { type: Number, required: true },
    h: { type: Number, required: true },
    nameDraft: { type: String, required: true },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    'update:nameDraft': (_v: string) => true,
    'apply': () => true,
    'cancel': () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    const focused = ref(false)

    watch(
      () => props.modelValue,
      (open) => {
        focused.value = open
      },
      { immediate: true },
    )

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

      const innerW = Math.max(0, props.w - 4)
      const dialogBg = ui.token('dialog.chrome')?.bg
      const dialogBgStyle = dialogBg ? { bg: dialogBg } : undefined

      return h(
        TDialog as any,
        {
          'modelValue': props.modelValue,
          'onUpdate:modelValue': (v: boolean) => emit('update:modelValue', v),
          'w': props.w,
          'h': props.h,
          'title': t('providerDialogs.nameDialog.title'),
          'placement': 'center',
          'padding': 1,
          'backdrop': false,
          'closeOnBackdrop': false,
          'style': ui.style(['dialog.chrome']),
          'buttons': [
            {
              label: t('common.apply'),
              value: 'apply',
              kind: 'primary',
              default: true,
            },
            { label: t('common.cancel'), value: 'cancel' },
          ],
          'closeOnConfirm': false,
          'onConfirm': (btn: any) => {
            if (btn?.value === 'apply')
              emit('apply')
            else emit('cancel')
          },
          'onClose': () => emit('cancel'),
          'onKeydownCapture': (e: any) => {
            if (e?.key === 'Escape') {
              e.preventDefault?.()
              emit('cancel')
            }
          },
        },
        () => [
          h(TText, {
            x: 0,
            y: 0,
            w: innerW,
            value: withFocusedInputTip(
              t('providerDialogs.nameDialog.label'),
              focused.value,
              t('common.inputClearTip'),
            ),
            style: ui.style(['dialog.chrome', 'text.muted']),
          }),
          h(TInput, {
            'x': 0,
            'y': 1,
            'w': innerW,
            'modelValue': props.nameDraft,
            'onUpdate:modelValue': (v: string) => emit('update:nameDraft', v),
            'placeholder': t('providerDialogs.nameDialog.placeholder'),
            'placeholderWhenFocused': true,
            'autoFocus': true,
            'cursorToEndOnFirstFocus': true,
            'cursorToEndOnExternalUpdate': true,
            'style': ui.style(['input.field'], dialogBgStyle),
            'onFocus': () => {
              focused.value = true
            },
            'onBlur': () => {
              focused.value = false
            },
          }),
        ],
      )
    }
  },
})
