
import { defineComponent, PropType, ref } from 'vue'

export const InputTsx = defineComponent({
  name: 'input-tsx',
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const onInput = (value: string) => context.emit('update:modelValue', value)

    return () => <a-input value={props.modelValue} onChange={(e: any) => onInput(e.target.value)}/>
  }
})

export const SelectTsx = defineComponent({
  name: 'select-tsx',
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    },
    request: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const list = ref<{
      name: string,
      value: any,
      key: string
    }[]>([])

    props.request().then((r: {
      name: string,
      value: any,
      key: string
    }[]) => {
      list.value = r
    })

    const onInput = (value: string) => context.emit('update:modelValue', value)

    return () => (
      <a-select value={props.modelValue} onChange={(value: string) => onInput(value)}>
       {
        list.value.map(item => <a-select-option key={item.key} value={item.value}>{item.name}</a-select-option>)
       }
      </a-select>
    )
  }
})

export const TextareaTsx = defineComponent({
  name: 'textarea-tsx',
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const onInput = (value: string) => context.emit('update:modelValue', value)
    return () => <a-textarea value={props.modelValue} allow-clear onChange={(e: any) => onInput(e.target.value)}/>
  }
})
