import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import styles from './button.scss';
import Load from '../Load';

const Button = ({
  children,
  onClick,
  disabled,
  theme,
  small,
  loading,
  block,
  inverse,
}) => {
  const cx = classnames.bind(styles);

  const themes = {
    primary: 'primary',
    secondary: 'secondary',
    success: 'button__success',
    danger: 'button__danger',
    clear: 'clear',
  };

  return (
    <button
      disabled={disabled}
      onClick={loading ? () => {} : onClick}
      type="button"
      tabIndex={0}
      className={cx('button', [themes[theme]], {
        small,
        loading,
        block,
        inverse,
      })}
    >
      {loading && <Load theme={theme === 'primary' ? 'light' : 'primary'} />}
      <span className={cx('button_content')}>{children}</span>
    </button>
  );
};

Button.defaultProps = {
  theme: 'primary',
  block: false,
  disabled: false,
  loading: false,
  small: false,
  inverse: false,
};

Button.propTypes = {
  block: PropTypes.bool,
  disabled: PropTypes.bool,
  loading: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  small: PropTypes.bool,
  children: PropTypes.node.isRequired,
  theme: PropTypes.oneOf([
    'primary',
    'secondary',
    'success',
    'danger',
    'clear',
  ]),
  inverse: PropTypes.bool,
};

export default Button;