import React, { Component } from "react";
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
import axios from 'axios';


//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.state = {
            user: "",
            password: ""
        }
       /* 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 => {
        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);
        });

    };

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




    render() {
        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>
        );
    }
}