import { CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import { CommonComponentProps } from '../../utils/types'
import { Loading, LoadingProps } from '../loading/Loading'
import './Button.scss'

export interface ButtonProps extends CommonComponentProps {
  className?: string
  style?: CSSProperties
  children?: ReactNode
  type?: 'primary' | 'secondary' | 'mild' | 'outlined' | 'text' | 'pale-text'
  theme?:
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'light'
    | 'dark'
  size?: 'default' | 'small' | 'large'
  rounded?: boolean
  block?: boolean
  disabled?: boolean
  loading?: boolean
  loadingText?: ReactNode
  loadingProps?: LoadingProps
  [propName: string]: any
}

export function Button(props: ButtonProps) {
  const {
    className,
    children,
    type = 'primary',
    theme = 'primary',
    size = 'default',
    rounded = false,
    block = false,
    disabled = false,
    loading = false,
    loadingText,
    loadingProps,
    ...restProps
  } = props

  const buttonClass = classNames(
    's-button',
    's-button-' + (type !== 'primary' ? type + '-' : '') + theme,
    {
      ['s-button-' + size]: size !== 'default',
      's-button-rounded': rounded,
      's-button-block': block,
      's-button-disabled': disabled,
      's-button-loading': loading,
    },
    className
  )

  return (
    <button {...restProps} className={buttonClass} disabled={disabled}>
      <div className="s-button-content">
        {loading ? (
          <>
            <Loading {...loadingProps}></Loading>
            {loadingText && (
              <span className="s-button-loading-text">{loadingText}</span>
            )}
          </>
        ) : (
          children
        )}
      </div>
    </button>
  )
}

export default Button