import React from 'react';
import ReactDOM from 'react-dom';
import * as RB from 'react-bootstrap';
import $ from "jquery";

export class Modal extends React.Component {
	render(){
		return(
			<div>
				<RB.Modal show={this.props.showModal} onHide={this.props.close}>
		      		<RB.Button onClick={this.props.signUp}>Sign Up</RB.Button>
				</RB.Modal>
			</div>
		);
	}
}


export class Header extends React.Component {

	constructor(props) {
    	super(props);
    	this.state = { showModal: false };
  	}

    close() {
    	this.setState({ showModal: false });
  	}

  	open() {
    	this.setState({ showModal: true });
  	}

	signUp() {
	  	var signUpData = {
	  		username : ReactDOM.findDOMNode(this.refs.username).value,
	  		password : ReactDOM.findDOMNode(this.refs.password).value,
	  		passwordVerify : ReactDOM.findDOMNode(this.refs.passwordVerify).value,
	  		email : ReactDOM.findDOMNode(this.refs.email).value
	  		};
	}

	render() {
		return (
			<div>
				<Modal show={this.state.showModal} onHide={this.close.bind(this)} onClick={this.signUp.bind(this)}/>
			</div>
		);
	}
}