import * as React from 'react';
import {ButtonHTMLAttributes, CSSProperties} from "react";
import sc from 'utils/classname';
import Icon from '../icon/icon';
import './index.scss';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
  type?: 'primary' | 'danger' | 'warning' | 'success' | 'midnightBlue' | 'dark',
  loading?: boolean,
  className?: string,
  style?: CSSProperties,
  onClick?: React.MouseEventHandler
}

const Button: React.FunctionComponent<ButtonProps> = (props) => {

  const {onClick, className, type, loading, ...restProps} = props;

  const btnClasses = sc(className, 'wen-button', type, loading ? 'wen-loading' : '');

  const onButtonClick:React.MouseEventHandler = (e) => {
    if (loading) return;
    onClick && onClick(e)
  }

  const iconWrapper = loading ?
    (
      <div className="wen-loading-icon-wrapper">
        <Icon name="loading" className="wen-loading-icon"/>
      </div>
    )
    :
    '';

  return (
    <button className={btnClasses} onClick={onButtonClick} {...restProps}>
      {iconWrapper}
      <span className="wen-button-inner">
        {props.children}
      </span>
    </button>
  );
};

Button.defaultProps = {
  loading: false,
};

export default Button;