import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-groceries',
  templateUrl: './groceries.component.html',
  styleUrls: ['./groceries.component.css']
})
export class GroceriesComponent {

  createItem = '';
  showLoginUserInputForm = false;
  showCreateUserInputForm = false;
  loginEmail = '';
  loginPassword = '';
  createEmail = '';
  createPassword = '';
  userEmail = '';

  constructor(public afAuth: AngularFireAuth) {
    this.afAuth.auth.onAuthStateChanged(user => {
      if (user) {
        // when logged in show user email here
        this.userEmail = user.email;
      }
    });
  }

  showLoginUserForm() {
    this.showLoginUserInputForm = true;
  }

  showCreateUserForm() {
    this.showCreateUserInputForm = true;
  }

  createUser() {
    this.afAuth.auth.createUserWithEmailAndPassword(this.createEmail, this.createPassword)
      .then(
        function(success) {
          // on success hide create user input form and store variables in login
          // and then call the login method
          this.showCreateUserInputForm = false;
          this.loginEmail = this.createEmail;
          this.loginPassword = this.createPassword;
          this.createEmail = '';
          this.createPassword = '';
          this.loginUser();
        }.bind(this),
        function(error) {
          alert(error);
      });
  }

  loginUser() {
    this.afAuth.auth.signInWithEmailAndPassword(this.loginEmail, this.loginPassword)
      .then(
        function(success) {
          // on success populate user variables and then select grocery items for that user
          this.userUiD = success.user.uid;
          this.userEmail = success.user.email;
          this.loginEmail = '';
          this.loginPassword = '';
          this.showLoginUserInputForm = false;
          this.showCreateUserInputForm = false;
          this.userEmail = this.afAuth.auth.currentUser.email;
        }.bind(this),
        function(error) {
          alert(error);
      });
  }

  // async is not necessary here, just controlling the event loop
  async logoutUser() {
    await this.afAuth.auth.signOut()
      .catch(function(error) { alert(error); });
  }

  cancelButton() {
    this.showLoginUserInputForm = false;
    this.showCreateUserInputForm = false;
  }

}