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

class ModalController extends React.Component {
    state = {
        open: false
    };

    toggle(open) {
        this.setState({
            open
        });
    }

    render() {
        return (
            <div>
                <Button click={ this.toggle.bind(this, true) }>
                    Open Modal
                </Button>

                <Modal
                    isOpen={ this.state.open }
                    closeFunc={ this.toggle.bind(this, false) }>
                    <div className="modal-content">
                        <h3>Modal Header</h3>
                        <p>This is a paragraph of text.</p>
                        <Button click={ this.toggle.bind(this, false) }>
                            Close
                        </Button>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default function() {
    ReactDOM.render(
        <ModalController />,
        document.getElementById('modal')
    );
}
