import React from 'react'

import classNames from 'classnames'

import styles from './NButton.module.scss'

export type NButtonSizeType =
  | 'small'
  | 'middle'
  | 'middle-large'
  | 'large'
  | 'big-large'
  | 'sm-radius'
  | 'login-large'
  | 'auto-large'
export type NButtonType = 'primary' | 'default' | 'danger' | 'white'

export type INButtonProps = {
  style?: React.CSSProperties
  className?: string
  children?: React.ReactNode
  size?: NButtonSizeType
  type?: NButtonType
  // btnType?: 'radius'
  disabled?: boolean
  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
}

const NButton: React.FC<INButtonProps> = props => {
  const { style, className, children, size = 'small', type = 'default', disabled, onClick } = props
  const NButtonClassName = classNames(
    'com-cursor-p',
    styles.customNButton,
    {
      [styles['custombutton-primary-disabled']]: type === 'primary' && disabled,
      [styles['custombutton-disabled']]: type !== 'primary' && disabled,
      [styles[`custombutton-${size}`]]: size,
      [styles[`custombutton-${type}`]]: type
      // [styles['custombutton-radius']]: btnType === 'radius',
      // [styles['custombutton-radius-btn']]: btnType === 'radius'
    },
    className
  )

  const handleClick = (e: React.MouseEvent<HTMLElement | HTMLDivElement, MouseEvent>) => {
    e.preventDefault()
    e.stopPropagation()
    if (disabled) return
    onClick && onClick(e)
  }
  return (
    <div className={NButtonClassName} style={style} onClick={handleClick}>
      {children}
    </div>
  )
}

export default NButton
