import React, { Component } from "react";
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
//import { BrowserRouter as Router, Route } from "react-router-dom";
//import { Link } from "react-router-dom";
import axios from "axios";
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Link, Redirect } from "react-router-dom";
import { Route } from "react-router";
import { createBrowserHistory } from "history";
import logo from "./Logo";



//fetch('http:// localhost:52654/Service1.svc/Login', {
//    method: 'POST',
//    headers: {
//        'Accept': 'application/json',
//        'Content-Type': 'application/json',
//    },
//    body: JSON.stringify({
//        user: ' ' ,
//        password:  ' ' ,
//    })
//})

const API = "https://services.testnisite.com:8103/PublicWin/JoinVenture/Service1.svc/Login";

export default class Login extends Component {
    constructor(props) {
        super(props);
        // this.openHome = this.openHome.bind(this);
        //this.returnToLogin = this.returnToLogin.bind(this);
        this.state = {
            user: "",
            password: "",
            isLogged: false,
            redirect: '',


        };
        //this.switch2home = this.switch2home.bind(this);
        //   activeComponent: <Home changeState={this.changeState.bind(this)} />
        /* this.fetchuser = this.fetchuser.bind(this);*/
        this.handleSubmit = this.handleSubmit.bind(this);
        // this.onChange = this.onChange.bind(this);
        this.handleChange = this.handleChange.bind(this);
        // this.onClick = this.onClick.bind(this);
    }



    /*--*/
    // changeState = () => {
    //  this.setState({ activeComponent: <Home /> })

    /*  fetchuser = () => {
            axios.get('ht tp://l ocalhost:52654/Service1.svc/Login/')
                .then((response) => {
                    this.setState({ user: response.data, password: response.data })
                        .cath((error) => {

                            console.log(error);
                        });
                }

    }*/



    validateForm() {
        return this.state.user.length > 0 && this.state.password.length > 0;
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
        console.log(event.target.id);
    };

    redirect(path) {
        this.props.history.push(path);
    }

    handleSubmit = event => {
        event.preventDefault();
        axios({
            method: "post",
            url: API,
            data: {
                user: this.state.user,
                password: this.state.password
            },
            withCredentials: false,
            responseType: "json",
            responseEncoding: "utf8"
        }).then(response => {
            console.log("login", response);

            if (response.status == 200) {
                this.setState
                    ({
                        user: this.state.user,
                        password: this.state.password

                    });
                // this.props.history.push("/Home");
                var res = JSON.parse(response.data.LoginResult);

                if (res[0].isAllowed) {
                    this.redirect("/Home");
                }
                else {
                    this.redirect("/Error");
                }

                console.log("Token: " + res[0].Token + " - isAllowed: " + res[0].isAllowed);
                localStorage.setItem("Token", res[0].Token)

                console.log(localStorage.getItem("Token"));
            }


        }).catch((err) => {
            document.getElementById("user").value = "";
            document.getElementById("password").value = "";
            this.setState({ user: "", password: "" });

            document.getElementById("user").focus();
        });
    };



    render() {

        /*if (this.state.Login === 'Login') {
                 return < Route path="/" exact={true} component={Home} />
             }*/

        //if (this.props.history.push === true) {
        //        return<Redirect to="/" />
        //    }



        return (


            <div className="Login">
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <FormGroup controlId="user" bsSize="large">
                        <ControlLabel>User</ControlLabel>
                        <FormControl
                            autoFocus
                            type="user"
                            value={this.state.user}
                            onChange={this.handleChange.bind(this)}
                        />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <ControlLabel>Parola</ControlLabel>
                        <FormControl
                            value={this.state.password}
                            onChange={this.handleChange.bind(this)}
                            type="password"
                        />
                    </FormGroup>
                    <Button
                        block
                        bsSize="large"
                        disabled={!this.validateForm()}
                        //onClick={this.handleClick.bind(this)}
                        type="submit"
                    >
                        Conectare
          </Button>


                    <div className="slica" >
                        <img src="https://10pariuri.ro/wp-content/uploads/2018/02/Agentia-de-pariuri-online-Publicwin.png" height="300px" width="250px" />


                    </div>
                </form>

            </div>
        );
    }
}