import React from 'react';
import './button.less';

/**\

    title: Button
    category: atom
    description: A base button example
    props:
        click[Function]: a callback for the click event
        type[String]:
            Mostly for styling, this adds a class to the button element. By
            default (no class) this renders a button with the brand-color as
            background. Also supports the following:
            diminished: white bg, brand text color, and grey border
            grayscale: white bg, black text color, and grey border
        disabled[Boolean]: Adds a disabled class to the button element
        loading[Boolean]: Shows loading spinner

\**/
class Button extends React.Component {
    click(evt) {
        if (!this.props.hasOwnProperty('click') ||
            typeof this.props.click !== 'function') {
            return;
        }

        if (this.props.disabled) {
            return;
        }

        this.props.click(evt);
    }

    render() {
        let classer = 'button';

        if (this.props.type) {
            classer += ' ' + this.props.type;
        }

        if (this.props.disabled) {
            classer += ' disabled';
        }

        if (this.props.loading) {
            classer += ' loading';
        }

        return (
            <button className={ classer }
                onClick={ this.click.bind(this) }
                type={ this.props.type }>
                <span className="content">{ this.props.children }</span>
                <span className="loading-spinner" />
            </button>
        );
    }
}

export default Button;
