import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ENV } from '@app/env';
import { Store } from '@ngrx/store';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import LogRocket from 'logrocket';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

import { AuthenticateAction, LoadAuthenticatedUserAction } from '../../app/session/session.actions';
import * as fromSession from '../../app/session/session.reducer';
import { User } from '../../app/session/user';
import * as fromLoadingIndicatiorActions from './../../app/loading-indicator/loading-indicator.actions';
import * as fromToastActions from './../../app//toast/toast.actions';


/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: "page-login",
  templateUrl: "login.html"
})
export class LoginPage implements OnInit, OnDestroy{

  public form: FormGroup;
  public autenticated$: Observable<boolean>;
  public _authenticatedSub: Subscription;
  public user$: Observable<User>;
  public error: string;
  public errorSub: Subscription;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private store: Store<fromSession.State>,
    private formBuilder: FormBuilder,
  ) {
  }

  public ngOnInit() {
    // create the login form
    this.form = this.formBuilder.group({
      username: ["", Validators.required],
      password: ["", Validators.required]
    });

    // get the authenticated observable from the store
    this.autenticated$ = this.store.select(fromSession.isAuthenticated);
    this.user$ = this.store.select(fromSession.currentUser);

    // subscribe to a succesfull authentication
    this._authenticatedSub = this.autenticated$.subscribe(value => {
      if (value) {
        this.onAuthenticationSuccess();
      }
    });

    this.user$.subscribe(value => {
      if (value) {
        if (ENV.mode === "Production") {
          LogRocket.identify(value.email, {
            name: value.firstName,
            lastName: value.lastName,
            email: value.email
          });
        }
        Bugfender.setDeviceKey('email', 'test@example.com');
      }
    });

    this.errorSub = this.store.select(fromSession.selectError).subscribe(error => {
      if (error) {
        if (error.error && error.error.error && error.error.error.detail === 'Bad credentials') {
          this.error = 'Passwort und oder Benutzername falsch.'
        } else {
          this.store.dispatch(new fromToastActions.ShowToastAction(''));
        }
        this.store.dispatch(
          new fromLoadingIndicatiorActions.DismissLoadingIndicatorAction()
        );
      } else {
        this.error = undefined;
      }
    })

  }

  public ngOnDestroy() {
    this._authenticatedSub.unsubscribe();
    this.errorSub.unsubscribe();
  }

  /**
   * Submits the login form.
   *
   */
  public submit() {
    // get email and password values
    const username: string = this.form.get("username").value;
    const password: string = this.form.get("password").value;

    // trim values
    username.trim();
    password.trim();

    this.store.dispatch(
      new fromLoadingIndicatiorActions.ShowLoadingIndicatorAction()
    );
    // dispatch the action
    this.store.dispatch(new AuthenticateAction(username, password));
  }

  /**
   * Dispatch the action to load the current user object,
   * redirect to the TourPage and set the TourPage as root
   * (its not necessary to return to the login page).
   *
   */
  public onAuthenticationSuccess() {
    this.store.dispatch(new LoadAuthenticatedUserAction());
  }
}