import { GoogleAnalyticsService } from './../../../services/google-analytics.service';
import { MatDialogRef, MatSnackBar } from '@angular/material';
import { DOCUMENT } from '@angular/platform-browser';
import { MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-share-popup',
  templateUrl: './share-popup.component.html',
  styleUrls: ['./share-popup.component.css']
})
export class SharePopupComponent implements OnInit {
  //private urlPartA: string = "https://www.facebook.com/plugins/share_button.php?href=";
  //private urlPartB: string = "&layout=button_count&size=large&mobile_iframe=true&width=106&height=28&appId";
  private urlPartA: string = "https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=";
  private urlPartB: string = "&display=popup&ref=plugin&src=share_button";
  private twitterPartA: string = "https://twitter.com/intent/tweet?text=";
  private twitterPartB: string = "https://twitter.com/intent/tweet?text=ShareThis&url=http%3A%2F%2Fwww.sharethis.com%2F";
  public twitterUrl: string;
  private id: string;
  public facebookIframeUrl: string;
  private shareBaseUrl: string = "/api2/share/";
  public shareUrl: string;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, 
              @Inject(DOCUMENT) private document,
              private MatDialogRef: MatDialogRef<SharePopupComponent>, 
              private snackbar: MatSnackBar,
              private googleAnalyticsService: GoogleAnalyticsService) { 
    this.id = data.id;
    let port = this.document.location.port ? ":"+this.document.location.port : "";
    this.shareUrl = this.document.location.protocol +'//'+ this.document.location.hostname + port + this.shareBaseUrl + data.prefix + this.id;
    if (this.data.prefix === 'o') {
      const shareData = encodeURIComponent(JSON.stringify(this.data.otherData));
      console.log(shareData);
      this.shareUrl = this.document.location.protocol + '//' + this.document.location.hostname + port + this.shareBaseUrl + data.prefix + shareData;
      console.log(this.shareUrl);
    }
    this.facebookIframeUrl = this.urlPartA + this.shareUrl + this.urlPartB;
    this.twitterUrl = this.twitterPartA + data.title + " - " + data.description + "&url=" + this.shareUrl;
  }

  ngOnInit() {
  }

  close(){
    this.MatDialogRef.close();
  }
  
  copyLink(target){
    target.select();
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      target.blur();
      let s = this.snackbar.open("Link Copied","OK");
          s.onAction().subscribe(()=>{ s.dismiss(); });
          s.afterOpened().subscribe(()=>{ setTimeout(()=>{ s.dismiss(); },3000); });
      this.share("link");
    } catch (err) {
      console.error('Oops, unable to copy');
    }
  }

  share(method: string){
    if (this.data.prefix === 's'){
      this.googleAnalyticsService.shareSermon(Number(this.id),this.data.title,method);
    } else if (this.data.prefix === 'e'){
      this.googleAnalyticsService.shareEvent(Number(this.id),this.data.title,method);
    }
  }

  facebookShare(){
    this.share('facebook');
  }

  twitterShare(){
    this.share('twitter');
  }
}