import classnames from 'classnames'
import React, { PureComponent, ReactElement } from 'react'
import ClickFeedback from 'rmc-feedback'
import './style.less'

const prefixCls = 'ph-button'

export interface PhButtonProps {
  onClick?: () => void
  disabled?: boolean
  type?: string
  br?: string
  inline?: boolean
  className?: string
  children?: string | ReactElement
  isPad?: boolean
}

class PhButton extends PureComponent<PhButtonProps> {
  public static defaultProps = {
    type: 'primary',
    br: 'small',
    disabled: false,
    inline: false
  }
  public onClick = () => {
    const { disabled, onClick } = this.props
    if (disabled) return
    // tslint:disable-next-line
    onClick && onClick()
  }
  public render() {
    const {
      className,
      inline,
      children,
      disabled,
      type,
      br,
      isPad,
      ...props
    } = this.props
    const { onClick } = this

    const cls = classnames(prefixCls, className, {
      [`${prefixCls}-ghost`]: type === 'ghost',
      [`${prefixCls}-danger`]: type === 'danger',
      [`${prefixCls}-large-br`]: br === 'large',
      [`${prefixCls}-disabled`]: disabled,
      [`${prefixCls}-inline`]: inline,
      'ph-button-pad': isPad
    })

    return (
      <ClickFeedback
        activeClassName={`${prefixCls}-active`}
        disabled={disabled}
      >
        <a role="button" className={cls} {...props} onClick={onClick}>
          {children}
        </a>
      </ClickFeedback>
    )
  }
}

export default PhButton