import React                              from 'react';
import { Link }                           from 'react-router';
import { Row, Col, FormGroup,
  ControlLabel, FormControl,
  InputGroup, Button }                    from 'react-bootstrap';
import handleSignup                       from '../../modules/signup';
import { Orgs }                           from '/imports/collections/orgs/index';

export default class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      orgSlug: ""
    };
  }
  componentWillMount(){
    Meteor.subscribe('allOrgsSlug');
  }

  componentDidMount() {
    handleSignup({ component: this });
  }
  handleChange(e) {
     this.setState({ orgSlug: e.target.value });
   }
  handleSubmit(event) {
    event.preventDefault();
  }
  checkExistingOrgSlug() {
    console.log(this.state.orgSlug);
    if(this.state.orgSlug==""){return null}
    searchOrg = Orgs.find({slug:this.state.orgSlug}).fetch();
    if(searchOrg.length>0){
      return "error"
    }else{
      return "success"
    }
  }
  render() {
    return (
      <div className="Signup">
        <Row>
          <Col xs={ 12 } sm={ 6 } md={ 4 }>
            <h4 className="page-header">Sign Up</h4>
            <form
              ref={ form => (this.signupForm = form) }
              onSubmit={ this.handleSubmit }
            >
            <Row>
            <Col xs={ 12 } sm={ 12 }>
              <FormGroup controlId="orgSlugField" validationState={this.checkExistingOrgSlug()}>
                <ControlLabel>Organisation name</ControlLabel>
                <InputGroup>
                  <FormControl
                    type        ="text"
                    ref         ="orgSlug"
                    name        ="orgSlug"
                    placeholder ="School Name"
                    onChange    = {(e) => this.handleChange(e)}
                  />
                  <InputGroup.Addon>@yd.com</InputGroup.Addon>
                </InputGroup>
              </FormGroup>
            </Col>
            </Row>
              <Row>
                <Col xs={ 6 } sm={ 6 }>
                  <FormGroup>
                    <ControlLabel>First Name</ControlLabel>
                    <FormControl
                      type="text"
                      ref="firstName"
                      name="firstName"
                      placeholder="First Name"
                    />
                  </FormGroup>
                </Col>
                <Col xs={ 6 } sm={ 6 }>
                  <FormGroup>
                    <ControlLabel>Last Name</ControlLabel>
                    <FormControl
                      type="text"
                      ref="lastName"
                      name="lastName"
                      placeholder="Last Name"
                    />
                  </FormGroup>
                </Col>
              </Row>
              <FormGroup>
                <ControlLabel>Email Address</ControlLabel>
                <FormControl
                  type="text"
                  ref="emailAddress"
                  name="emailAddress"
                  placeholder="Email Address"
                />
              </FormGroup>
              <FormGroup>
                <ControlLabel>Password</ControlLabel>
                <FormControl
                  type="password"
                  ref="password"
                  name="password"
                  placeholder="Password"
                />
              </FormGroup>
              <Button type="submit" bsStyle="success">Sign Up</Button>
            </form>
            <p>Already have an account? <Link to="/login">Log In</Link>.</p>
          </Col>
        </Row>
      </div>
    );
  }
}