import React, { Component } from "react";
import "./styles/Login.css";
import {Link} from 'react-router-dom';


//  import { NavItem, Nav} from "react-bootstrap";
//  import Signup from './components/Signup.js';
//  import {createAppContainer,navigation} from 'react-navigation';
// import {createStackNavigator} from 'react-navigation-stack';


class Signin extends Component {

  state = {
    on: false,
    newsItems: [],
    messageList: [],
    username:'',
    password:''
  }

  checklogincred() {
    fetch('http://127.0.0.1:5000/login', {
           method: 'POST',
           headers: { //MODIFY HEADERS
            'Content-Type': 'application/json',
           },
           body:  JSON.stringify({
            'username':this.state.username,
            'password':this.state.password
          })
        })
        .then((response) => response.json())
        .then((responseJson) => {
           console.log(responseJson);
          //  this.setState({
          //   loading: false,
          //   //   data: responseJson.data,
          //  })
          //  alert(JSON.stringify(responseJson));
            // alert(JSON.stringify(data));
            // <a eventkey={1} componentClass={Link} href="/Home" to="/Home"></a>
        })
        .catch((error) => {
           console.error(error);
        });

  }

    //btnClick() {

        // route to new page by changing window.location
    //     window.location="./Signup.js" //to open new page
    //  }  onClick={this.btnClick.bind(this)}



  render() {
    return (



        <div className="form-wrapper">
          <h1>Signin Now</h1>
          <form className="form-login">
            <div className="Email">
              <label>Username</label>
              <input className="input-login"
              placeholder="Username"
              type="username"
              onChange={(username) => this.setState({username})}
               required />
              </div>

            <div className="password">
              <label >Password</label>
              <input
                className="input-login"
                placeholder="Password"
                type="password"
                onChange={(password) => this.setState({password})}
                required
              />
              {/* <button className="forgot" type="button">Forgot Password ?</button> */}
            </div>

            <div className="login">
              <button type="submit" onClick={this.checklogincred}>Signin</button>
            </div>
          </form>

                  {/* <a eventkey={1} componentClass={Link} href="/Signup" to="/Signup">
                  <button type="button"  className="login"> New User ? Register </button>
                  </a> */}


            </div>
    );
  }
}



export default Signin;