import React, { Component } from 'react';
import { Button, Card, CardBody, CardImg, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import axios from 'axios';
import { Redirect } from 'react-router-dom';
import generateRand from 'randomstring';
import bcrypt from 'bcryptjs';
import sinclair from '../../../assets/img/brand/logo6.png'
import { ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

var restBaseAddrModule = require('../../../globals.js')
var restBaseAddr = restBaseAddrModule.restBaseAddr
var salt = bcrypt.genSaltSync(10);

// var hash = bcrypt.hashSync("B4c0/\/", salt);
class Login extends Component {
  constructor(props){
    super(props)
    this.state = {
      username: '',
      password: '',
      loggedIn: false,
      newUser: false,
    }
  }

  notify(response){
    // console.log(response.data.status)
    if(response.data.status == 'success') {
      toast.success(response.data.toastStatus)
    } else {
      toast.error(response.data.toastStatus)
    }
  }

  handlerUsername(e){
    this.setState({
      username: e.target.value
    })
  }

  handlerPassword(e){
    this.setState({
      password: e.target.value
    })
  }

  componentDidMount(){
    this.setState({
      token: generateRand.generate(),
    })
  }

  loginUser(){
    console.log(restBaseAddr)
    // console.log(this.state.token);
    // console.log(bcrypt.hashSync(this.state.password),salt);
    axios.put(restBaseAddr + '/login',{
        sesstionToken: "0x122333",
        userName: this.state.username,
        password: this.state.password,
      })
      .then((response)=>{
        console.log(response.data)
        console.log("successfull request")
        if(response.data.status==='success') {
          this.setState({
            loggedIn: true
          })}
          else{this.notify(response);}
      })
      .catch(function (error) {
        console.log(error);
        console.log("failed request");
    })
  }

  newUser = () => {
    this.setState({
      newUser: true,
    })
  }


  render() {
    return (
      <div className="app flex-row align-items-center">
      {this.state.loggedIn? (<Redirect from="/" to="/combinerstatus" />)  : (<Redirect to="/Login"/>)}
      {this.state.newUser?(<Redirect from="/" to="/register" />) : (<Redirect to="/Login" />)}
      <ToastContainer autoClose={4000} />
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                  <CardImg src={sinclair} />

                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="text" onChange={this.handlerUsername.bind(this)} placeholder="Username" />
                    </InputGroup>
                    <InputGroup className="mb-4">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="password" onChange={this.handlerPassword.bind(this)} placeholder="Password" />
                    </InputGroup>
                    <Row>
                      <Col xs="6">
                        <Button color="primary" onClick={()=>this.loginUser()} className="px-4">Login</Button>
                      </Col>
                      {/*<Col xs="6" className="text-right">
                          <Button color="link" onClick={this.newUser} className="px-0">Forgot password?</Button>
                        </Col>*/}


                    </Row>
                  </CardBody>
                </Card>
                {/*<Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 444 + '%' }}>
                  <CardBody className="text-center">
                    <div>

                      {/*<Button color="primary" className="mt-3" active>Register Now!</Button>*}
                    </div>
                      </CardBody>
                      </Card>*/}
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;