var MySmallModal = React.createClass({
    render: function() {
        return (
               <Modal {...this.props} bsSize="small" aria-labelledby="contained-modal-title-sm">
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-sm">Contact Form</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <div><MyContactForm mhide = {this.props.mhide} /></div>
                </Modal.Body>
                <Modal.Footer>
                    <b><Button onClick={this.props.onHide}>Close</Button></b>
                </Modal.Footer>
            </Modal>
        );
    }
});

var MyContactForm = React.createClass({
    propTypes: {
        value: React.PropTypes.object.isRequired
    },

    render: function() {
        return (

            <form>
                <Input type="text" label="Name" placeholder="Your Name" bsSize="large" />
                <Input type="email" label="Email" placeholder="Your Email" bsSize="large"/>
                <Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>
                <Input type="checkbox" label="Rules and Conditions" checked readOnly bsSize="large"/>
                <ButtonGroup vertical block>
                    <Button type="reset" bsStyle="warning" bsSize="large">Reset</Button>
                    <Button type="submit" bsStyle="success" bsSize="large">Submit</Button>
                <b> <Button onClick = {this.props.mhide}>Close</Button></b>
                </ButtonGroup>
		</form>
        )
    }
});

var App = React.createClass({
    getInitialState() {
        return { smShow: false};
    },

    showModal() {
        this.setState({show: true});
    },

    hideModal: function() {
     this.setState({smShow: false});
    },

    render() {
        let smClose = () => this.setState({ smShow: false });

        return (
            <ButtonToolbar>
                <Button bsStyle="primary" onClick={()=>this.setState({ smShow: true })}>
                    Contact Form
                </Button>

                <MySmallModal mhide= {this.hideModal} show={this.state.smShow} onHide={smClose} />
            </ButtonToolbar>
        );
    }
});

ReactDOM.render(<App />, document.getElementById("MyEl"));