import React                              from 'react';
  import { Link }                           from 'react-router';
  import { Row, Col, FormGroup,
    ControlLabel, FormControl,
    InputGroup, Button }                    from 'react-bootstrap';

  import handleSignup                       from './signup';

  import { Orgs }                           from '/imports/collections/orgs/index';

  import './signup.css';

  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() {

      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  md={ 12 }>

              <h4 className="page-header">Sign Up</h4>
              <form
                ref={ form => (this.signupForm = form) }
                onSubmit={ this.handleSubmit }
              >

              <Row>

              <Col xs={ 10 } sm={ 10 }>

                <FormGroup controlId="orgSlugField" validationState={this.checkExistingOrgSlug()}>

                  <ControlLabel>Organisation URL</ControlLabel>

                  <InputGroup>
                    <FormControl

                      type        ="text"
                      ref         ="orgSlug"
                      name        ="orgSlug"

                      placeholder ="Organisation URL"

                      onChange    = {(e) => this.handleChange(e)}

                    />
                    <InputGroup.Addon>@yd.com</InputGroup.Addon>
                  </InputGroup>
                </FormGroup>
              </Col>
              </Row>

              <Row>
                <Col xs={ 6 } sm={ 6 }>
                  <FormGroup>

                    <ControlLabel>Organisation Name</ControlLabel>

                    <FormControl
                      type="text"
                      ref="orgName"
                      name="orgName"

                      placeholder="Organisation Name"

                    />
                    </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>

                {/* <Col md={12} */}

                <Button type="submit" style={{float: 'right'}} bsStyle="success">Sign Up</Button>

              </form>

              </Col>

          </Row>
        </div>
      );

    }
  }