import React from 'react'
import { Col,  Form, FormGroup, Label, Input, Container ,Row,Button} from 'reactstrap';
import { Redirect} from 'react-router-dom';
import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader';
import swal from 'sweetalert'

class Signupform extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            signInEmail:'',
            signInPassword:'',
            signInPhoneno:'',
            signInName:'',
            signInSchool:'',
            signInten:'',
            signIntwelve:'',
            signInConfirmPassword:'',
            log:false,
            data:''
        }
    }

    onEmailChange = (event) =>{
        this.setState({signInEmail: event.target.value})
    }
    onTenChange = (event) =>{
      this.setState({signInten: event.target.value})
  }
    onSchoolchange = (event) =>{
    this.setState({signInSchool: event.target.value})
    }
    onTwelveChange = (event) =>{
      this.setState({signIntwelve: event.target.value})
    }

    onPasswordChange = (event) =>{
        this.setState({signInPassword: event.target.value})
    }

    onConfirmPasswordChange = (event) =>{
      this.setState({signInConfirmPassword: event.target.value})
      
     }

    onNameChange = (event) =>{
        this.setState({signInName: event.target.value})
    }
    
    onPhonenoChange = (event) =>{
        this.setState({signInPhoneno: event.target.value})
        if(this.state.signInPassword !== this.state.signInConfirmPassword){
          swal("Oops!","Password not match,Try again","error")
        }
    }

    onSubmitSignIn = (e) => {
        e.preventDefault();
        if(this.state.signInPassword !== this.state.signInConfirmPassword){
          swal("Oops!","Password not match,Try again","error")
        }
else{
        const env=process.env.NODE_ENV;
        const url = env === 'production'? 'http://35.188.161.64/server/register':'http://localhost:5000/register'
        fetch(url,{
            method:'post',
            headers: {'Content-Type':'application/json'},
            body:JSON.stringify({
                email:this.state.signInEmail,
                name:this.state.signInName, 
                phoneno:this.state.signInPhoneno,
                password:this.state.signInPassword,
                school:this.state.signInSchool,
                ten:this.state.signInten,
                twelve:this.state.signIntwelve
            }),
        })
        swal("Good job","Successfully registered","success")
        // .then((response) => {
          // return response.json();
            // console.log(response)
        // }).then((response_json) => {
        //   this.state.data=response_json;
        //   console.log(this.state.data)
        //   if(this.state.data.auth=== true){
        //     swal("Good job","Successfully registered","success")
        //     this.setState({log:true })
        // }
        // else{
        //     swal("Oops!","Wrong Credentials","error")
        // }
        // })
        this.setState({log:true})
        this.props.onRouteChange("login");
      }
      }

    render(){
  return (
    <>
    <Breadcrumbs path="Register" />
    <Subheader path="Register" />
    <div data-aos="fade-up" data-aos-duration="1000" >
    <Container>
        <Row className="row-content">
            <Col className="bg-orange round-border" style={{padding:"1%"}}>
            <div className="d-flex justify-content-center align-items-center">
            <Container>
               <Row className="text-center">
                <i className="fa fa-user-plus fa-4x"></i>
                </Row><br></br>
            <Form onSubmit={this.onSubmitSignIn }>
            <FormGroup row>
        <Label for="user" sm={2}>Name</Label>
        <Col sm={10}>
          <Input type="text" onChange={this.onNameChange} required className="input border-0" name="name" id="user" placeholder="Your Name" ></Input>
        </Col>
      </FormGroup>
      <FormGroup row>
      <Label for="email1" sm={2}>Email</Label>
        <Col sm={10}>
          <Input type="email" onChange={this.onEmailChange} name="email" required  className="input border-0" id="email1" placeholder="abc@gmail.com" />
        </Col>
      </FormGroup>
      <FormGroup row>
                <Label for="password" sm={2}>Password :</Label>
                <Col sm={10}>
                <Input type="password" onChange={this.onPasswordChange} required className="input border-0" name="password" id="password" placeholder="Password" ></Input>
            </Col>
        </FormGroup>
        <FormGroup row>
                <Label for="cpassword" sm={2}>Confirm Password :</Label>
                <Col sm={10}>
                <Input type="password" onChange={this.onConfirmPasswordChange} required className="input border-0" name="cpassword" id="cpassword" placeholder="Password" ></Input>
            </Col>
        </FormGroup>
        
      <FormGroup row>
        <Label for="tel" sm={2}>Phone Number :</Label>
        <Col sm={10}>
          <Input type="tel" name="phoneno" onChange={this.onPhonenoChange} required className="input border-0" id="tel" placeholder="Mobile Number" />
        </Col>
      </FormGroup>
      <FormGroup row>
        <Label for="sec" sm={2}>10th Marks :</Label>
        <Col sm={10}>
          <Input type="number" name="secmark" onChange={this.onTenChange } required className="input border-0" id="sec" />
        </Col>
      </FormGroup>
      <FormGroup row>
        <Label for="highersec" sm={2}>12th Marks :</Label>
        <Col sm={10}>
          <Input type="number" name="highersecmark" onChange={this.onTwelveChange} required className="input border-0" id="highersec" />
        </Col>
      </FormGroup>
      <FormGroup row>
        <Label for="sch" sm={2}>School / College Name :</Label>
        <Col sm={10}>
          <Input type="text" name="school" onChange={this.onSchoolchange} required className="input border-0" id="sch" placeholder="School / College Name" />
        </Col>
      </FormGroup>
      <FormGroup check row>
        <Col sm={{ size: 10, offset: 2 }}>
          <Button type="submit" className="border-0  m-3 " style={{paddingRight:"25px",paddingLeft:"25px"}}>Sign Up</Button>
          
          <Button type="reset" className="border-0  p" style={{paddingRight:"25px",paddingLeft:"25px"}}>Reset</Button>
          <a href="/" className="m-3 btn text-white bg-black" style={{border:"none"}}>Already have an account?</a>
        </Col>
      </FormGroup> 
    </Form>
            </Container>
            </div>
            </Col>
        </Row>
        {this.state.log === true && <Redirect to='/'push />}
    </Container>
    </div>
</>
    )}
}

export default Signupform