import { defineComponent, h, type Component, type PropType } from 'vue'

export const DataTableStub = defineComponent({
  name: 'DataTable',
  props: { data: { type: Array as PropType<object[]>, default: () => [] } },
  setup(props, { slots }) {
    return () => h('div', { 'data-testid': 'data-table' }, [
      slots['toolbar-actions']?.(),
      ...props.data.flatMap(row => slots.actions?.({ row }) || []),
    ])
  },
})

export const AppDialogStub = defineComponent({
  name: 'AppDialog',
  props: { title: { type: String, required: true }, confirmText: { type: String, default: '确定' } },
  emits: ['confirm'],
  setup(props, { emit, slots }) {
    return () => h('section', { 'data-dialog': props.title }, [
      slots.default?.(),
      h('button', { class: 'dialog-confirm', onClick: () => emit('confirm') }, props.confirmText),
    ])
  },
})

export const ModelInputStub = defineComponent({
  name: 'ElInput',
  inheritAttrs: false,
  props: { modelValue: { type: [String, Number], default: '' }, type: { type: String, default: 'text' } },
  emits: ['update:modelValue', 'blur'],
  setup(props, { attrs, emit }) {
    return () => h(props.type === 'textarea' ? 'textarea' : 'input', {
      ...attrs,
      value: props.modelValue,
      onInput: (event: Event) => emit('update:modelValue', (event.target as HTMLInputElement).value),
      onBlur: () => emit('blur'),
    })
  },
})

export const ModelSelectStub = defineComponent({
  name: 'ElSelect',
  props: { modelValue: { type: [String, Number], default: '' } },
  emits: ['update:modelValue'],
  setup(props, { emit, slots }) {
    return () => h('select', {
      value: props.modelValue,
      onChange: (event: Event) => emit('update:modelValue', (event.target as HTMLSelectElement).value),
    }, slots.default?.())
  },
})

export const OptionStub = defineComponent({
  name: 'ElOption',
  props: { value: { type: [String, Number], required: true }, label: { type: String, required: true } },
  setup(props) { return () => h('option', { value: props.value }, props.label) },
})

export const ModelNumberStub = defineComponent({
  name: 'ElInputNumber',
  props: { modelValue: { type: Number, default: undefined } },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    return () => h('input', {
      type: 'number',
      value: props.modelValue,
      onInput: (event: Event) => {
        const value = (event.target as HTMLInputElement).value
        emit('update:modelValue', value === '' ? undefined : Number(value))
      },
    })
  },
})

export const commonPhase5Stubs: Record<string, Component> = {
  DataTable: DataTableStub,
  AppDialog: AppDialogStub,
  QueryToolbar: defineComponent({ name: 'QueryToolbar', setup: () => () => h('div') }),
  ElInput: ModelInputStub,
  ElSelect: ModelSelectStub,
  ElOption: OptionStub,
  ElInputNumber: ModelNumberStub,
}