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




const API = 'http://localhost:56641/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(response => {


            if (response.statusText == "OK") {
                console.log('RESPONSE STATUS OK');

                    user: response.data.user
                    password: response.data.password

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

            } else {
                console.log("Return to login");
            }
        });

    };

    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(response => {
            this.openHome(response)

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

        });
    }

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



    }


    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>
        );
    }
}