import { LoginProviders } from '../models/login/LoginInfo';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ElementRef, AfterViewInit, VERSION, Injectable, NgZone } from '@angular/core';
import { Router, ActivatedRoute, Params } from "@angular/router";
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
import { TranslateService } from "@ngx-translate/core";
import { AuthService } from '../services/auth/auth.service';
import { SnackBarNotificationComponent } from '../shared/components/notificaiton/snack-bar-notification.component';

declare const gapi: any;
declare const FB: any;

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  public auth2: any;

  constructor(private router: Router,
    public authService: AuthService,
    public route: ActivatedRoute,
    public snackBar: MatSnackBar,
    public language: TranslateService,
    private zone: NgZone
  ) { }



  ngOnInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: '524432312250-sc9qsmtmbvlv05r44onl6l93ia3k9deo.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        scope: 'profile email'
      });
      this.attachGoogleSignin(document.getElementById('googleSignInButton'));
    });

    FB.init({
      appId: '110586756143149',
      cookie: false,  // enable cookies to allow the server to access
      // the session
      xfbml: true,  // parse social plugins on this page
      version: 'v2.8' // use graph api version 2.5
    });
  }

  public attachGoogleSignin(element) {
    this.auth2.attachClickHandler(element, {},
      (googleUser) => {

        var id_token = googleUser.getAuthResponse().id_token;
        if (id_token) {
          this.authService.login({ ticket: id_token, provider: LoginProviders.Google }).subscribe(
            res => this.onLogInSuccess(res),
            error => this.onLogInError(error)
          )
        }

      }, (error) => {
        alert(JSON.stringify(error, undefined, 2));
      });
  }

  public onLogInSuccess(logoutMessage: any) {
    this.snackBar.openFromComponent(SnackBarNotificationComponent, {
      data: { message: 'GENERAL.SNACK-BAR.SUCCESSFUL-LOGIN', language: this.language },
      duration: 3000,
      extraClasses: ['snackbar-success']
    });
    this.route.queryParams.subscribe((params: Params) => {
      let redirectUrl = params['returnUrl'] ? params['returnUrl'] : '/';
      this.zone.run(() => this.router.navigate([redirectUrl]));
    })
  }

  public onLogInError(errorMessage: string) {
    console.log(errorMessage);
    this.snackBar.openFromComponent(SnackBarNotificationComponent, {
      data: { message: 'GENERAL.SNACK-BAR.UNSUCCESSFUL-LOGIN', language: this.language },
      duration: 3000,
      extraClasses: ['snackbar-warning']
    })
  }

  public facebookLogin() {

    FB.login((response: any) => {
      if (response.status === 'connected' || 'not_authorized') {
        this.authService.login({ ticket: response.authResponse.accessToken, provider: LoginProviders.Facebook }).subscribe(
          res => this.onLogInSuccess(res),
          error => this.onLogInError(error)
        )
      }

    }, { scope: 'user_friends,email' });
  }
}