import { buildProps, definePropType } from '@kankan/utils'

import { checkboxInputProps } from './checkbox/checkbox'
import { checkRadioProps } from './checkRadio/checkRadio'
import { fileProps } from './file/file'
import { radioProps } from './radio/radio'
import { numberProps } from './number/number'
import { rangProps } from './range/range'
import { richTextProps } from './richtext/richtext'
import { searchProps } from './search/search'
import { selectProps } from './select/select'
import { switchProps } from './switch/switch'
import { textInputProps } from './text/text'
import { textareaProps } from './textarea/textarea'

import radio from './radio/radio.vue'
import * as UISwitch from './switch/switch.vue'
import text from './text/text.vue'
import checkbox from './checkbox/checkbox.vue'
import select from './select/select.vue'
import range from './range/range.vue'
import textarea from './textarea/textarea.vue'
import number from './number/number.vue'
import file from './file/file.vue'
import search from './search/search.vue'
import richtext from './richtext/richtext.vue'
import type { ExtractPropTypes, VNode } from 'vue'

export type InputType = 'checkbox' | 'text' | 'select' | 'radio' | 'range' | 'number' | 'switch' | 'textarea' | 'search' | 'richtext' | 'file'
// import type { PropType } from 'vue'

export const inputProps = buildProps({
    ...checkboxInputProps,
    ...checkRadioProps,
    ...radioProps,
    ...fileProps,
    ...numberProps,
    ...rangProps,
    ...richTextProps,
    ...searchProps,
    ...selectProps,
    ...switchProps,
    ...textInputProps,
    ...textareaProps,
    type: {
        type: definePropType<InputType>(String),
    },
})

export type InputProps = ExtractPropTypes<typeof inputProps>

type InputComponentsType = {
    [propsName in InputType]: InputComponentsPropType
}
interface InputComponentsPropType {
    component: VNode
    props: InputProps | unknown
}
export const InputComponents: InputComponentsType = {
    radio: {
        props: radioProps,
        component: radio,
    },
    text: {
        props: textInputProps,
        component: text,
    },
    number: {
        props: numberProps,
        component: number,
    },
    checkbox: {
        props: checkRadioProps,
        component: checkbox,
    },
    select: {
        props: selectProps,
        component: select,
    },
    range: {
        props: rangProps,
        component: range,
    },
    switch: {
        props: switchProps,
        component: UISwitch,
    },
    textarea: {
        props: textareaProps,
        component: textarea,
    },
    search: {
        props: searchProps,
        component: search,
    },
    richtext: {
        props: richTextProps,
        component: richtext,
    },
    file: {
        props: fileProps,
        component: file,
    },
}

// export type
export * from './checkbox/checkbox'
export * from './richtext/richtext'
export * from './checkRadio/checkRadio'
export * from './file/file'
export * from './radio/radio'