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

@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
  ) {}

  ngOnInit(): void {
    // @ts-ignore
    google.accounts.id.initialize({
      client_id: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
      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();
  }

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