import React, { Component } from 'react';
import './instaAuth.css';

class InstaAuth extends Component {
  constructor(){
  super();
    this.state = {
      username: '',
      password: '',
      message:  '',
      isloggedIn: true,
      userdata : {
        userid : '',
        username : '',
        fullname : '',
        profile_pic : ''
      }
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

handleChange(event,type) {
  if(type == 'username')
    this.setState({username: event.target.value});
  if(type == 'password')
    this.setState({password: event.target.value});
}

  handleSubmit(event) {
    var username = this.state.username;
    var password = this.state.password;
    fetch('/auth' , {
      method: 'POST',
      credentials:'include',
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })
    .then(json =>{
      if(json.sucess){
        this.state({message: 'Logged in sucessfully',userdata: json.userdata, isloggedIn: true})
      }
      else{
        this.setState({message:json.message})
      }
    })
    .catch(e => {
      this.setState({message: "Something went wrong! Try Again"})
    })
    event.preventDefault();
  }

  render(){
  return (
    <div class="container" id="container">
      <div class="nav-container headers-container">
        <label>
          <input type="checkbox" />
          <span class="check"> </span>
        </label>
      </div>
      <div class=" sss-container">
        <div class=" profile-container">
          <div class="wrapper">
            <div class="profile-card js-profile-card">
              <div class="form-container sign-in-container">
                <form>
                  <h1>Sign in</h1>
                  <span>use your instagram account</span>
                  <input type="text" value={this.state.value} placeholder="Username" onChange={(e) => this.handleChange(e,'username')} />
                  <input type="password" value={this.state.value} placeholder="Password" onChange={(e) => this.handleChange(e,'password')} />
                  <input type="submit" onClick={this.handleSubmit} value="Submit" />
                </form>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  );
}
}

export default InstaAuth;