import React from 'react';
import './register.css';
import Axios from 'axios';
import {Link} from 'react-router-dom';


class RegForm extends React.Component{
constructor (props){
    super(props);
    this.state={
        firstName:'',
        lastName:'',
        userName:'',
        password:'',
        cnfmPassword:''
    };
}
handleChange = (e) => {
    this.setState({
        [e.target.name] : e.target.value
    })
    console.log(e.target.value);
}
formSubmit = (e) =>{
    e.preventDefault(); // prevent default form submission behaviour

    //Sree, please add prompt asking for user to insert matching passwords if the below condition is met

    if (this.state.password != this.state.cnfmPassword) {
      alert("Passwords do not match. Please try again.")

      return;
    }

    Axios({
        method: "post",
        url: "/users",
        data: {
              firstName: this.state.firstName,
              lastName:this.state.lastName,
              userName: this.state.userName,
              password: this.state.password,
               },

    }).then((response) => {
        console.log(response);
        if(response.data.validated) {
          this.setState({
                  firstName:'',
                  lastName:'',
                  userName:'',
                  password:'',
                  cnfmPassword:''
          })

          window.location.href ="/package"

        };
        alert(response.data.message);


    }).catch((err) =>{
        console.log(err);
    })
}

    render(){
    return(
        <div className='container row'>
            <label><h2> Register</h2></label>
            <div className='registration-form'>
            <form onSubmit={this.formSubmit} >


        <div className="form-group row">
        <label for="firstName" className="col-sm-2 col-form
        label">First Name</label>
        <div className="col-sm-10">
                    <input type='text' id='firstName' className='form-control' name='firstName'
                    placeholder='First Name' onChange={this.handleChange} value={this.state.firstName} required/>
                  </div>
                </div>

                <div className="form-group row">
                  <label for="lastName" className="col-sm-2 col-form-label">Last Name</label>
                  <div className="col-sm-10">
                    <input type='text' id='lastName' className='form-control' name='lastName'
                    placeholder='Last Name' onChange={this.handleChange} value={this.state.lastName} required/>
                  </div>
                </div>

                <div className="form-group row">
                  <label for="userName" className="col-sm-2 col-form-label">User Name</label>
                  <div className="col-sm-10">
                    <input type='text' id='userName' className='form-control' name='userName'
                    placeholder='User Name' onChange={this.handleChange} value={this.state.userName} required/>
                  </div>
                </div>
                <div className="form-group row">
                  <label for="password" className="col-sm-2 col-form-label">Password</label>
                  <div className="col-sm-10">
                    <input type='password' id='password' className='form-control' name='password'
                    placeholder='Password' onChange={this.handleChange} value={this.state.password} required/>
                  </div>
                </div>
                <div className="form-group row">
                  <label for="cnfmPassword" className="col-sm-2 col-form-label">Confirm Password</label>
                  <div className="col-sm-10">
                    <input type='password' id='cnfmPassword' className='form-control' name='cnfmPassword'
                    placeholder='Confirm Password' onChange={this.handleChange} value={this.state.cnfmPassword} required/>
                  </div>
                </div>
                <div className="form-group row">
                 <input type='submit' id='submit' value='Submit' className='btn btn-primary ' />
                </div>


                <p>Already registered? Go to Login! </p>


                </form>
                   <p><Link to='/'>Login</Link></p>
            </div>
        </div>
    )
}

}

export default RegForm;