import { View, Text } from '@tarojs/components'
import { FC, ReactNode } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
type ButtonSize = 'normal' | 'small'

interface PropsType {
  size?: ButtonSize
  type?: ButtonType
  round?: boolean // 大圆角
  disabled?: boolean
  plain?: boolean // plain
  circle?: boolean // 小圆角
  children?: ReactNode
  onClick?: Function
  customClassName?: string
  customStyles?: React.CSSProperties
  customTextClassName?: string
}

const NormalButton: FC<PropsType> = (props) => {
  const {
    type = 'primary',
    size = 'normal',
    round = false,
    disabled = false,
    children,
    onClick,
    plain = false,
    circle = false,
    customStyles = {},
    customClassName = '',
    customTextClassName = ''
  } = props
  const getClassName = () => {
    const classObject = {
      [styles[`button--disabled`]]: disabled,
      [styles[`button--${size}`]]: size,
      [styles[`button--${type}`]]: type,
      [styles['button--round']]: round,
      [styles['button--plain']]: plain,
      [styles['button--circle']]: circle,
    }
    return classObject
  }

  const handleClick = (event) => {
    if (disabled) {
      return
    }
    onClick && onClick(event)
  }


  return (
    <View className={classnames(styles['button'], getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
      <View className={classnames(styles['button--text'], customTextClassName)}>{children}</View>
    </View>
  )
}
export default NormalButton