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 { BrowserRouter as Router, Link } from "react-router-dom";
import { Route, Redirect } from "react-router";
import { createBrowserHistory } from "history";

//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: "",
      isLogged: false,
      redirect:''
      //activeComponent: <Home changeState={this.changeState.bind(this)} />
    };
    this.switch2home = this.switch2home.bind(this);

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

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

  /*  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 => {
      this.props.history.push("/");

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

        this.state.isLogged = true;
        {
          this.openHome;
        }
      } 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(response) {
    this.setState({
      user: response.data.user,
      password: response.data.password
    });
    // this.props.changeState();
    // this.transitionTo('/');
    this.switch2home();

  }
switch2home(){
    // console.log(this.refs.home);
    localStorage.setItem('logged','true');
    this.setState({redirect:<Redirect push to="/" />});
}
  returnToLogin() {
    this.setState({
      isLogged: !this.state.isLogged
    });
  }
componentWillMount = () => {
  localStorage.setItem('logged','false');
}


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

        {this.state.redirect}

      </div>
    );
  }
}