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 DimSdkRenameSessionDialog = defineComponent({
  name: 'DimSdkRenameSessionDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    w: { type: Number, required: true },
    h: { type: Number, required: true },
    initialValue: { type: String, default: '' },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    submit: (_title: string) => true,
    cancel: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    const draft = ref(String(props.initialValue ?? ''))
    const focused = ref(false)

    watch(
      () => props.modelValue,
      (open, prev) => {
        if (!open) {
          focused.value = false
          return
        }
        focused.value = true
        if (prev) return
        draft.value = String(props.initialValue ?? '')
      },
      { immediate: true },
    )

    function close(): void {
      emit('update:modelValue', false)
    }

    function cancel(): void {
      emit('cancel')
      close()
    }

    function submit(): void {
      const next = String(draft.value ?? '').trim()
      emit('submit', next)
      close()
    }

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

      const innerW = Math.max(0, props.w - 4) // border + padding
      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('renameSessionDialog.title'),
          placement: 'center',
          padding: 1,
          backdrop: false,
          closeOnBackdrop: false,
          style: ui.style(['dialog.chrome']),
          buttons: [
            {
              label: t('common.save'),
              value: 'save',
              kind: 'primary',
              default: true,
            },
            { label: t('common.cancel'), value: 'cancel' },
          ],
          closeOnConfirm: false,
          onConfirm: (btn: any) => {
            if (btn?.value === 'save') submit()
            else cancel()
          },
          onClose: cancel,
        },
        () => [
          h(TText, {
            x: 0,
            y: 0,
            w: innerW,
            value: withFocusedInputTip(
              t('renameSessionDialog.label'),
              focused.value,
              t('common.inputClearTip'),
            ),
            style: ui.style(['dialog.chrome', 'text.muted']),
          }),
          h(TInput, {
            x: 0,
            y: 1,
            w: innerW,
            modelValue: draft.value,
            'onUpdate:modelValue': (v: string) => (draft.value = v),
            onKeydown: (e: any) => {
              if (e?.key === 'Escape') {
                e.preventDefault?.()
                cancel()
              }
            },
            placeholder: t('renameSessionDialog.placeholder'),
            placeholderWhenFocused: true,
            autoFocus: true,
            cursorToEndOnFirstFocus: true,
            style: ui.style(['input.field'], dialogBgStyle),
            onFocus: () => {
              focused.value = true
            },
            onBlur: () => {
              focused.value = false
            },
          }),
        ],
      )
    }
  },
})
