import type { ExtractPropTypes, PropType } from 'vue'

import type { MouseEventHandler } from '../_util/EventInterface'
import { eventType } from '../_util/type'
import PropTypes from '../_util/vue-types'
import type { SizeType } from '../config-provider'

export type ButtonType = 'link' | 'default' | 'primary' | 'ghost' | 'dashed' | 'text' | 'colours'
export type ButtonShape = 'default' | 'circle' | 'round'

export type ButtonHTMLType = 'submit' | 'button' | 'reset'

export type LegacyButtonType = ButtonType | 'danger'
export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
  if (type === 'danger') {
    return { danger: true }
  }
  return { type }
}

export const buttonProps = () => ({
  prefixCls: String,
  type: String as PropType<ButtonType>,
  htmlType: { type: String as PropType<ButtonHTMLType>, default: 'button' },
  shape: { type: String as PropType<ButtonShape> },
  size: {
    type: String as PropType<SizeType>,
  },
  loading: {
    type: [Boolean, Object] as PropType<boolean | { delay?: number }>,
    default: (): boolean | { delay?: number } => false,
  },
  disabled: { type: Boolean, default: undefined },
  ghost: { type: Boolean, default: undefined },
  block: { type: Boolean, default: undefined },
  danger: { type: Boolean, default: undefined },
  icon: PropTypes.any,
  href: String,
  target: String,
  title: String,
  onClick: eventType<MouseEventHandler>(),
  onMousedown: eventType<MouseEventHandler>(),
})

export type ButtonProps = Partial<ExtractPropTypes<ReturnType<typeof buttonProps>>>

export default buttonProps
