import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { StorageService } from '../../services/storage.service';
import { CommsService } from "../../services/comms.service";
import { ParameterService } from "../../services/parameter.service";
import { TranslateService } from "@ngx-translate/core";
import { UtilsService } from '../../services/utils.service';
import { InAppBrowser, UrlEvent, ToolBarType } from '@capgo/inappbrowser'

@Component({
  selector: "app-youtube",
  templateUrl: "./youtube.page.html",
  styleUrls: ["./youtube.page.scss"],
})
export class YoutubePage implements OnInit {

  socialNetworkAccounts: any = [];
  commAccounts: number;
  activeSocialNetworks: any = [];
  comms: string;

  facebookData: any = [];
  twitterData: any = [];
  instagramData: any = [];
  tiktokData: any = [];
  youtubeData: any = [];

  facebook: any;
  facebook_account_name: any;
  twitter_link: any = "https://twitter.com/";
  twitter_account_name: any;
  tweet_limit: any = 8;
  twitter: any;
  instagram: any;
  tiktoks: any;
  videos: any;

  constructor(
    public translateService: TranslateService,
    private utilsService: UtilsService,
    private dom: DomSanitizer,
    private commsService: CommsService,
    private storage: StorageService,
    public parameterService: ParameterService
  ) { }

  ngOnInit() {
    this.loadInit(500);
  }

  loadInit(time = 0) {
    setTimeout(() => {
      return new Promise((resolve, reject) => {
        this.utilsService.presentLoading(this.translateService.instant("all.loading")).then(() => {
          Promise.all([
            this.getFacebookData(),
            this.getTwitterData(),
            this.getInstagramData(),
            this.getTiktokData(),
            this.commsService.getYoutubeData().then((resp) => {
              this.youtubeData = resp;
              this.getSocialNetworkAccounts();
            }),
          ]).then(() => {
            this.utilsService.dismissLoading();
            resolve(false);
          }).catch((error) => {
            this.utilsService.dismissLoading();
            console.log('Error loadInit YoutubePage', error);
            reject(error);
          });
        });
      });
    }, time);
  }

  doRefresh(event) {
    setTimeout(() => {
      this.loadInit(100);
      event.target.complete();
    }, 500);
  }

  getFacebookData() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.commsService.getFacebook(token.access_token)).subscribe(
          (resp: any) => {
            this.facebookData = resp;
          },
          (error) => {
            console.log("error getFacebookData", error);
          }
        );
      }
    });
  }

  getTwitterData() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.commsService.getTwitter(token.access_token)).subscribe(
          (resp: any) => {
            this.twitterData = resp;
          },
          (error) => {
            console.log("error getTwitterData", error);
          }
        );
      }
    });
  }

  getInstagramData() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.commsService.getInstagram(token.access_token, '')).subscribe(
          (resp: any) => {
            this.instagramData = resp;
          },
          (error) => {
            console.log("error getInstagramData", error);
          }
        );
      }
    });
  }

  getTiktokData() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.commsService.getTiktok(token.access_token)).subscribe(
          (resp: any) => {
            this.tiktokData = resp;
          },
          (error) => {
            console.log("error getTiktokData", error);
          }
        );
      }
    });
  }

  getSocialNetworkAccounts() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.commsService.getSocialNetworkAccounts(token.access_token)).subscribe(
          (resp: any) => {
            this.socialNetworkAccounts = resp;
            if (this.socialNetworkAccounts.length)
              this.commAccounts = this.socialNetworkAccounts[0].id
          },
          (error) => {
            console.log("error getSocialNetworkAccounts", error);
          }
        );
      }
    });
  }

  changeAccount(e: any) {
    let newCommAccount = parseInt(e.detail.value);
    if (this.commAccounts != newCommAccount)
      this.commAccounts = newCommAccount;

    this.validateActiveSocialNetworks();
  }

  validateActiveSocialNetworks() {
    let commAccounts = this.commAccounts;
    this.activeSocialNetworks = [];

    if (this.facebookData.length && this.facebookData.filter(function (data: any) { return data.social_network_account_id === commAccounts }).length) {
      this.activeSocialNetworks.push('facebook');
      this.facebook_account_name = this.facebookData.filter(function (data: any) { return data.social_network_account_id === commAccounts })[0].link;
      this.facebook = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Ffacebook.com%2F" + this.facebook_account_name + "&tabs=timeline&width=360&height=870&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId";
    }

    if (this.twitterData.length && this.twitterData.filter(function (data: any) { return data.social_network_account_id === commAccounts }).length) {
      this.activeSocialNetworks.push('twitter');
      this.twitter_account_name = this.twitterData.filter(function (data: any) { return data.social_network_account_id === commAccounts })[0].link;
      this.twitter = this.twitter_link + this.twitter_account_name;
      this.twitterSync();
    }

    if (this.instagramData.length && this.instagramData.filter(function (data: any) { return data.social_network_account_id === commAccounts }).length) {
      this.activeSocialNetworks.push('instagram');
      let instagrams = this.instagramData.filter(function (data: any) { return data.social_network_account_id === commAccounts });
      for (let i = 0; i < instagrams.length; ++i) {
        if (!instagrams[i].link.includes('embed')) {
          instagrams[i].link = instagrams[i].link.split('?')[0] + 'embed';
          instagrams[i].sanitizedSource = this.sanitizer(instagrams[i].link);
        }
      }
      this.instagram = instagrams;
    }

    if (this.tiktokData.length && this.tiktokData.filter(function (data: any) { return data.social_network_account_id === commAccounts }).length) {
      this.activeSocialNetworks.push('tiktok');
      let tiktoks = this.tiktokData.filter(function (data: any) { return data.social_network_account_id === commAccounts });
      for (let i = 0; i < tiktoks.length; ++i) {
        tiktoks[i].link = 'https://www.tiktok.com/embed/' + tiktoks[i].code;
        tiktoks[i].sanitizedSource = this.sanitizer(tiktoks[i].link);
      }
      this.tiktoks = tiktoks;
    }

    if (this.youtubeData.length && this.youtubeData.filter(function (data: any) { return data.social_network_account_id === commAccounts }).length) {
      this.activeSocialNetworks.push('youtube');
      let videos = this.youtubeData.filter(function (data: any) { return data.social_network_account_id === commAccounts });
      for (let i = 0; i < videos.length; ++i) {
        videos[i].link = 'https://www.youtube-nocookie.com/embed/' + videos[i].code;
        videos[i].sanitizedSource = this.sanitizer(videos[i].link);
      }
      this.videos = videos;
    }

    if (this.activeSocialNetworks.length)
      this.comms = this.activeSocialNetworks[0];
    else {
      this.utilsService.presentAlertInfo(this.translateService.instant("tickets.alert"), "", this.translateService.instant("NOT_SOCIAL_MEDIA"));
      this.activeSocialNetworks.push('empty');
      this.comms = this.activeSocialNetworks[0];
    }
  }

  changeSocialNetwork(e: any) {
    if (e.detail.value == 'twitter') {
      this.twitterSync();
    }
    this.comms = e.detail.value;
  }

  twitterRender() {
    (<any>window).twttr = (function (d, s, id) {
      let js: any, fjs = d.getElementsByTagName(s)[0],
        t = (<any>window).twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function (f: any) {
        t._e.push(f);
      };

      return t;
    }(document, "script", "twitter-wjs"));

    if ((<any>window).twttr.ready()) {
      (<any>window).twttr.widgets.load();
    } else {
      this.twitterSync();
    }

  }

  twitterSync() {
    setTimeout(() => {
      this.twitterRender();
    }, 100);
  }

  launchVideo(link: string) {
    this.utilsService.openLink(link);
  }

  launchStorie(link: string) {
    InAppBrowser.openWebView({
      url: link,
      isInspectable: false,
      toolbarType: ToolBarType.BLANK
    });

    InAppBrowser.addListener("urlChangeEvent", (state: UrlEvent) => {
      if (state.url.indexOf("/close") != -1) {
        InAppBrowser.close();
      }
    });
  }

  sanitizer(url: string) {
    return this.dom.bypassSecurityTrustResourceUrl(url);
  }
}