/* eslint-disable react/jsx-props-no-spreading */
import React from 'react'
import classNames from 'classnames'
import { Button, Icon } from 'antd'
import DemioIcon from '../Icon/Icon.jsx'
import './Button.less'

export default function ({
  htmlType,
  title,
  right,
  white,
  fullSize,
  disabled,
  border,
  thin,
  black,
  red,
  iconRight = false,
  iconLeft = true,
  big,
  small,
  cancel,
  icon,
  onClick,
  className,
  children,
  href,
  loading,
  target,
  demioIcon,
  iconWidth = 16,
  iconFill,
  ...props
}) {
  return (
    <Button
      {...props}
      {...{
        href,
        target,
        loading,
        ghost: border,
        disabled,
        size: small ? 'small' : 'default',
      }}
      type={white ? 'default' : 'primary'}
      htmlType={htmlType}
      className={classNames({
        [className]: className,
        Button: true,
        animated: true,
        fadeIn: true,
        '--red': red,
        '--black': black,
        '--thin': thin,
        '--big': big,
        '--right': right,
        '--full-size': fullSize,
        '--cancel': cancel,
        '--disabled': disabled,
        '--icon-left': iconLeft && !iconRight && (icon || demioIcon),
        '--icon-right': iconRight && (icon || demioIcon),
      })}
      onClick={onClick}>
      {iconRight && (title || children)}
      {icon && <Icon type={icon} />}
      {demioIcon && (
        <DemioIcon type={demioIcon} width={iconWidth} {...(iconFill ? { fill: iconFill } : {})} />
      )}
      {iconLeft && !iconRight && (title || children)}
    </Button>
  )
}