import { Component,OnDestroy  } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { NgForm } from '@angular/forms';
import { AuthService } from "./auth.service";

@Component({
    selector:"social-login",
    template: require('./social.login.html'),
    styles: [`
    .social{
	max-width:300px;
	margin:30px auto;
	background:rgba(255,255,255,0.2);
	padding:20px 25px;
	border-radius:2px;
	box-shadow:0px 0px 10px rgba(255,255,255,0.05);
}
    .social a{
	display:block;
	margin-bottom:15px;
	color:#fff;
	padding:8px 20px;
	border-radius:25px;
	text-align:center;
	font-size:12px;
	text-transform:uppercase;
	font-weight:600;
  text-decoration: none;
  cursor:pointer;
}
 .social a:hover{
  opacity: 0.9;
}
 .social a.facebook{
  background: #3280e7;
}
.social a.twitter{
  background: #32c8de;
}
.social a.google-plus{
  background: #f96f4a;
}
  `]
 
})
export class SocialLoginComponent implements OnDestroy {

   

    public user;
    sub: any;
  constructor(public _auth: AuthService){ }
  
  signIn(provider){
    this.sub = this._auth.login(provider).subscribe(
      (data) => {
        console.log(data);this.user=data;}
    )
  }

  logout(){
    this._auth.logout().subscribe(
      (data)=>{console.log(data);this.user=null;}
    )
  }

  ngOnDestroy(){
   // this.sub.unsubscribe();
  }


}
