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>
      );

    }
  }