import React from 'react';
import { Link } from 'react-router';
import { Row, Col, PageHeader, Input, Button } from 'react-bootstrap';
import { handleSignup } from '../../modules/signup';

export class Signup extends React.Component {
  componentDidMount() {
    handleSignup( { component: this } );
  }

  handleSubmit( event ) {
    event.preventDefault();
  }

  render() {
    return <Row>
      <Col xs={ 12 } sm={ 6 } md={ 4 }>
        <h4 className="page-header">Sign Up</h4>
        <form ref="signup" className="signup" onSubmit={ this.handleSubmit }>
          <Row>
            <Col xs={ 6 } sm={ 6 }>
              <Input
                type="text"
                label="First Name"
                ref="firstName"
                name="firstName"
                placeholder="First Name"
              />
            </Col>
            <Col xs={ 6 } sm={ 6 }>
              <Input
                type="text"
                label="Last Name"
                ref="lastName"
                name="lastName"
                placeholder="Last Name"
              />
            </Col>
          </Row>
          <Input
            type="email"
            label="Email Address"
            ref="emailAddress"
            name="emailAddress"
            placeholder="Email Address"
          />
          <Input
            type="password"
            label="Password"
            ref="password"
            name="password"
            placeholder="Password"
          />
          <Button type="submit" bsStyle="success">Sign Up</Button>
        </form>
        <p>Already have an account? <Link to="/login">Log In</Link>.</p>
      </Col>
    </Row>;
  }
}