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";



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

const API = 'http://localhost:52654/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: "",
            Login:false
        }

       /* this.fetchuser = this.fetchuser.bind(this);*/
        //this.handleSubmit = this.handleSubmit.bind(this)
        //this.onChange = this.onChange.bind(this);
        //this.onClick = this.onClick.bind(this);
    }

    /*--*/

  /*  fetchuser = () => {
        axios.get('http://localhost: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
        });

    };

    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(function (response) {
            console.log(response);
            if (response.statusText == "OK") {
                console.log('statusText');
                this.openHome(response);
            } else {
                this.returnToLogin();
            }
        });

    };

    handleClick() {
        //axios.post(API, {
        //    user: this.state.user,
        //    password: this.state.password
        //}).then(function (response) {
        //    console.log(response);
        //}).catch(function (error) {
        //    console.log(error.response);
        //});

        axios({
            method: 'post',
            url: API,
            data: {
                user: this.state.user,
                password: this.state.password
            },
           withCredentials: false,
            responseType: 'json',
            responseEncoding: 'utf8'
        }).then(function (response) {



            console.log(response.data);  /* response.data*/
        });
    }

    openHome(res) {
        this.setState({
            user: res.data.user,
            password: res.data.password
        });


        console.log("Password: " + this.state.password)
        console.log("User" +this.state.user)
    }


    returnToLogin() {

    }

    render() {

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


        return (

            <div className="Login">
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <FormGroup controlId="user" bsSize="large">
                        <ControlLabel>Username</ControlLabel>
                        <FormControl
                            autoFocus
                            type="user"
                            value={this.state.user}
                            onChange={this.handleChange.bind(this)}
                        />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <ControlLabel>Password</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"
                    >
                        Login
          </Button>
                </form>
            </div>
        );
    }
}