import {useSizeProp, useTypeProp} from '@moui/hooks'
import {iconPropType} from '@moui/utils'
import {Loading} from '@element-plus/icons-vue'
import type {ExtractPropTypes} from 'vue'
import type button from './button.vue'

export const buttonNativeTypes = ['button', 'submit', 'reset'] as const

export const buttonProps = {
    size: useSizeProp,  // 尺寸
    disabled: Boolean,  // 禁用状态
    type: useTypeProp,  // 类型
    icon: {
        type: iconPropType,
    },  // 图标
    nativeType: {
        type: String,
        values: buttonNativeTypes,
        default: 'button',
    },  // 原生 type 属性(button / submit / reset)
    loading: Boolean,       // 加载中
    loadingIcon: {
        type: iconPropType,
        default: () => Loading,
    },  // 自定义加载中状态图标
    plain: Boolean,     // 朴素按钮
    text: Boolean,      // 文字按钮
    link: Boolean,      // 是否链接按钮
    bg: Boolean,        // 是否显示文字按钮背景颜色
    autofocus: Boolean,     // 原生 autofocus 属性
    round: Boolean,         // 是否为圆角按钮
    circle: Boolean,        // 是否为圆形按钮
    color: String,          // 按钮颜色
    dark: Boolean,          // 暗黑模式
} as const
export const buttonEmits = {
    click: (evt: MouseEvent) => evt instanceof MouseEvent,
}

export type ButtonProps = ExtractPropTypes<typeof buttonProps>

export type ButtonEmits = typeof buttonEmits

export type ButtonType = ButtonProps['type']
/*export type ButtonNativeType = ButtonProps['nativeType']

export type ButtonInstance = InstanceType<typeof button>

export interface ButtonConfigContext {
    autoInsertSpace?: boolean
}*/