import React                              from 'react';
import { Link }                           from 'react-router';
import { Icon }                           from '/imports/client/components/Icon';
import { LinkContainer }                  from 'react-router-bootstrap';
import { Row, Col, FormGroup,
  ControlLabel, FormControl,
  InputGroup, Button,
  Navbar,Modal, Nav, NavItem,
    Glyphicon, Collapse,
    NavbarToggler, NavbarBrand,
    NavLink, DropdownItem, DropdownToggle, DropdownMenu,
    NavDropdown, MenuItem }                    from 'react-bootstrap';
import handleSignup                       from './signup';
import { Orgs }                           from '/imports/collections/orgs/index';
import { Meteor }                         from 'meteor/meteor';

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()
  {
    // const {user, org} = this.props.data;
    return(
      <div>
        <div className="wrapper">
        <div className="Content signupView">
          <Row>
            <Col  md={ 12 }>
              <h1>Welcome to YoungDesk!!!</h1>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                   in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,
                   sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </Col>
          </Row>
          <Row>
            <Col>
              <br></br>
              <br></br>
            </Col>
          </Row>
          <Row>
            <Col  md={ 3 }>
              <div className="service-box">
                  <i className="fa fa-4x fa-diamond"></i>
                  <h6>Lorem Ipsum</h6>
              </div>
            </Col>
            <Col  md={ 3 }>
              <div className="service-box">
                  <i className="fa fa-4x fa-paper-plane"></i>
                  <h6>Lorem Ipsum</h6>
              </div>
            </Col>
            <Col  md={ 3 }>
              <div className="service-box">
                  <i className="fa fa-4x fa-newspaper-o"></i>
                  <h6>Lorem Ipsum</h6>
              </div>
            </Col>
            <Col  md={ 3 }>
              <div className="service-box">
                  <i className="fa fa-4x fa-heart"></i>
                  <h6>Lorem Ipsum</h6>
              </div>
            </Col>
          </Row>
          <Row>
            <Col>
              <br></br>
              <hr></hr>
            </Col>
          </Row>
          <Row>
            <Col  md={ 12 }>
              <div className="service-box">
                  <h2 className="section-heading">Lets Get In Touch!</h2>
              </div>
            </Col>
          </Row>
          <hr width="10%"></hr>
          <Row>
            <Col  md={ 6 }>
              <div className="service-box">
                  <i className="fa fa-phone fa-2x"></i>
                  <p className="contact">123-456-6789</p>
              </div>
            </Col>
            <Col  md={ 6 }>
              <div className="service-box">
                  <i className="fa fa-envelope-o fa-2x"></i>
                  <p className="contact">feedback@youngdesk.com</p>
              </div>
            </Col>
          </Row>
        </div>

        <div className="Signup">
         <Row>
           <Col  md={ 12 }>
             <h4 className="page-header">Sign up with Us</h4>
             <hr></hr>
             <form
               ref={ form => (this.signupForm = form) }
               onSubmit={ this.handleSubmit }
             >
               <span className="side-heading"> Organisation Details </span>

             <Row>
             <Col md={ 12 }>
               <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 md={12}>
                 <FormGroup>
                   {/* <ControlLabel>Organisation Name</ControlLabel> */}
                   <FormControl
                     type="text"
                     ref="orgName"
                     name="orgName"
                     placeholder="Organisation Name"
                   />
                   </FormGroup>
               </Col>
             </Row>
             <hr width="25%"></hr>
             <span className="side-heading"> Personal Details </span>
             <Row>
                 <Col xs={ 6 }  md={4}  >
                   <FormGroup>
                     {/* <ControlLabel>First Name</ControlLabel> */}
                     <FormControl
                       type="text"
                       ref="firstName"
                       name="firstName"
                       placeholder="First Name"
                     />
                   </FormGroup>
                 </Col>
                 <Col xs={ 6 }  md={4}>
                   <FormGroup>
                     {/* <ControlLabel>Middle Name</ControlLabel> */}
                     <FormControl
                       type="text"
                       ref="midName"
                       name="midName"
                       placeholder="Middle Name"
                     />
                   </FormGroup>
                 </Col>
                 <Col xs={ 6 }  md={4}>
                   <FormGroup>
                     {/* <ControlLabel>Last Name</ControlLabel> */}
                     <FormControl
                       type="text"
                       ref="lastName"
                       name="lastName"
                       placeholder="Last Name"
                     />
                   </FormGroup>
                 </Col>
               </Row>
               <hr width="25%"></hr>
               <span className="side-heading">User Credentials</span>
               <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"}} className='blue'>Sign Up</Button>

             </form>
             </Col>
         </Row>
       </div>
      </div>
    </div>

    );
  }
}