import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'web-foundation';

class ButtonController extends React.Component {
    state = {
        loading: false
    };

    toggle() {
        this.setState({
            loading: !this.state.loading
        });
    }

    render() {
        return (
            <Button type={ this.props.type }
                disabled={ this.props.disabled }
                loading={ this.state.loading }
                click={ this.toggle.bind(this) }>
                { this.props.children }
            </Button>
        );
    }
}

export default function() {
    ReactDOM.render(
        <ButtonController>Default</ButtonController>,
        document.getElementById('button-default')
    );
    ReactDOM.render(
        <ButtonController disabled>
            Default (Disabled)
        </ButtonController>,
        document.getElementById('button-default-disabled')
    );
    ReactDOM.render(
        <ButtonController type="diminished">Diminished</ButtonController>,
        document.getElementById('button-diminished')
    );
    ReactDOM.render(
        <ButtonController type="diminished"
            disabled>
            Diminished (Disabled)
        </ButtonController>,
        document.getElementById('button-diminished-disabled')
    );
    ReactDOM.render(
        <ButtonController type="grayscale">Grayscale</ButtonController>,
        document.getElementById('button-grayscale')
    );
    ReactDOM.render(
        <ButtonController type="grayscale"
            disabled>
            Grayscale (Disabled)
        </ButtonController>,
        document.getElementById('button-grayscale-disabled')
    );
}
