import React from 'react'
import swal from 'sweetalert'
import { Col,  Form, FormGroup, Label, Input, Container ,Row,Button} from 'reactstrap';

class Loginform extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            signInEmail:'',
            signInPassword:'',
            data:''
        }
    }

    onEmailChange = (event) =>{
        this.setState({signInEmail: event.target.value})
    }

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

    onSubmitSignIn = (e) => {
        e.preventDefault();
        const env=process.env.NODE_ENV;
        const url = env === 'production'? 'http://35.188.161.64/server/login':'http://localhost:5000/login'
        fetch(
            url,{
            method:'post',
            headers: {'Content-Type':'application/json'},
            body:JSON.stringify({
                email:this.state.signInEmail,
                password:this.state.signInPassword, 
            }),            
        })
        .then((response) => {
      return response.json();
    }).then((response_json) => {
      this.state.data=response_json;
      console.log(this.state.data)
      if(this.state.data.auth=== true){
        localStorage.setItem("token",this.state.data.token);
        // console.log(this.state.data)
        this.props.onLoginChange(this.state.data.result)
        this.props.onLogoutChange("LogOut")
        this.props.onLoginStatusChange(true);
        let str="Welcome "+this.state.data.result
        swal("Good job",str,"success")
        window.location.reload()
    }
    else{
        this.props.onLoginStatusChange(false);
        swal("Oops!","Wrong Credentials","error")
    }
    })
    this.props.onRouteChange("home");
    }
   

    render(){
    return (
        <div>
            <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 fa-4x"></i>
                </Row><br></br>
                
            
            <Form onSubmit={this.onSubmitSignIn } >
            <FormGroup row>
            <Label for="email" sm={2}>Email :</Label>
                <Col sm={10}>
                <Input onChange={this.onEmailChange} type="email" name="email" required className="input border-0" id="email" placeholder="abc@gmail.com" />
                </Col>
            </FormGroup>
            <FormGroup row>
                <Label for="password" sm={2}>Password :</Label>
                <Col sm={10}>
                <Input type="password" onChange={this.onPasswordChange} id="show password" required className="input border-0" name="password" placeholder="Password" ></Input>
                </Col>
            </FormGroup>
            
            
      
            <FormGroup check row>
                <Container>
                <Row>
                
                <Col sm="12" className="text-center">
                <Button 
                 type="submit" className="border-0 m-1 " style={{paddingRight:"25px",paddingLeft:"25px"}}>Login</Button>

                <Button type="button" className="border-0 m-1" style={{paddingRight:"25px",paddingLeft:"25px"}}>Reset</Button>
               </Col>
               <Col sm="12" className="text-center">
               <span >Don't have an account ?</span> 
               <a href="/register" type="button" style={{padding:"15px"}} className="text-center"> <button type="button" className="btn text-white bg-black m-1" style={{border:"none"}}>Create a new account</button></a>
                
                </Col>
                </Row>
                </Container>
            </FormGroup> 
        </Form>
            </Container>
            </div>
            </Col>
        </Row>
    </Container>
    </div>
        </div>
    )}
}

export default Loginform