import { Component, OnInit} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
import { ToastService } from '../services/toast.service';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { Platform } from '@ionic/angular';

@Component({
    selector: 'app-home-details',
    templateUrl: './home-details.page.html',
    styleUrls: ['./home-details.page.scss'],
})
export class HomeDetailsPage implements OnInit {
    myComment: string = '';
    image_url = IMAGE_BASE_URL;
    newsDetails: any = {};
    alias_title: string = '';

    constructor(
        private route: ActivatedRoute,
        private location: Location,
        private dom:DomSanitizer,
        private newsService: NewsService,
        private toastService: ToastService,
        private socialSharing: SocialSharing,
        private platform: Platform
    ) { }

    getUrl(url) {
        return this.dom.bypassSecurityTrustResourceUrl(url);
    }

    transformYourHtml(htmlTextWithStyle) {
        return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += '<style type="text/css">p{ margin: 0px 0px 10px 0px; }</style>');
    }

    share() {
        this.socialSharing.share(this.newsDetails.title, '', this.newsDetails.images ? IMAGE_BASE_URL + this.newsDetails.images[0].data.imagePath + this.newsDetails.images[0].data.imageName : IMAGE_BASE_URL + this.newsDetails.image_path + this.newsDetails.image_file_name, this.newsDetails.hls_url ? this.newsDetails.hls_url : '');
    }

    ngOnInit() {
        this.alias_title = this.route.snapshot.paramMap.get('alias_title');
        let type = this.route.snapshot.paramMap.get('type');

        // type 'news' | 'videos' | 'gallery'
        
        if (type === 'news') {
            this.newsService.getArticleDetails(this.alias_title).then((data: any) => {
                
                if (this.platform.is('android') || this.platform.is('capacitor')) {
                    this.newsDetails = JSON.parse(data.data)['content'].data;
                } else {
                    this.newsDetails = data.content.data;
                }

            }, (err) => {
                console.log(err);
                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
            });
        }

        if (type === 'videos') {
            this.newsService.getVideoDetails(this.alias_title).then((data: any) => {

                
                if (this.platform.is('android') || this.platform.is('capacitor')) {
                    this.newsDetails = JSON.parse(data.data)['content'].data;
                } else {
                    this.newsDetails = data.content.data;
                }

            }, (err) => {
                console.log(err);
                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
            });
        }

        if (type === 'gallery') {
            this.newsService.getGalleryDetails(this.alias_title).then((data: any) => {

                
                if (this.platform.is('android') || this.platform.is('capacitor')) {
                    this.newsDetails = JSON.parse(data.data)['content'].data;
                } else {
                    this.newsDetails = data.content.data;
                }

            }, (err) => {
                console.log(err);
                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
            });
        }
    }
    
    ngAfterViewInit(){
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
      
          if (d.getElementById(id)){
            //if <script id="facebook-jssdk"> exists
            delete (<any>window).FB;
            fjs.parentNode.replaceChild(js, fjs);
          } else {
            fjs.parentNode.insertBefore(js, fjs);
          }
        }(document, 'script', 'facebook-jssdk'));
    }

    getLowRestImagePath(path: string) {
        return path.replace("/0/", "/4-3/388-218/");
    }

    back() {
        this.location.back();
    }

}
