import { Component, NgZone, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import jwt_decode from "jwt-decode";
import { AuthService } from 'src/app/auth/auth.service';
import { User } from 'src/app/models/user';
import { DataService } from 'src/app/services/data.service';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})

export class LoginPageComponent implements OnInit {
  constructor(
    private data$: DataService,
    private router$: Router,
    private auth$: AuthService,
    private ngZone$: NgZone
  ) {}

  ngOnInit(): void {
      // @ts-ignore
      window.onGoogleLibraryLoad = () => {
        // @ts-ignore
        google.accounts.id.initialize({
          client_id: environment.google.clientId,
          callback: this.handleCredentialResponse.bind(this),
          auto_select: true,
          cancel_on_tap_outside: true
        });
        // @ts-ignore
        google.accounts.id.renderButton(
        // @ts-ignore
        document.getElementById("google-button"),
          { theme: "outline", size: "large", width: "100%" } 
        );
        // @ts-ignore
        google.accounts.id.prompt((notification: PromptMomentNotification) => {});
      };
  }

  async handleCredentialResponse(response: any) { 
    try {
      const responsePayload: any = jwt_decode(response.credential);
      this.data$.currentUser = new User({
        googleCredentials: response.credential,
        userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
        email: responsePayload.email,
        avatar: responsePayload.picture
      });
      this.ngZone$.run(() => { 
        this.router$.navigate(['/app']);
      });
      await this.auth$.getAPIToken(response.credential);
    } catch (e) {
      console.error('Get user error', e);
    }
  }
}