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

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
})

export class HomePage implements OnInit {
    @ViewChild('slides') slides: IonSlides;
    
    selectedTab: 'news' | 'videos' | 'gallery' = 'news';

    slideOpts = {
        slidesPerView: 1.5,
        spaceBetween: 15,
        initialSlide: 0,
        centeredSlides: true,
        // simulateTouch: false,
        // followFinger: false,
    };

    newsData = [];
    videoData = [];
    galleryData = [];

    showChat: boolean = false;

    image_url = IMAGE_BASE_URL;
    myuptime: string;

    constructor(
        private router: Router,
        private newsService: NewsService,
        private toastService: ToastService,
        private dom: DomSanitizer,
        private socialSharing: SocialSharing,
        private platform: Platform,
    ) { }

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

    share(message: string, image?: string, url?: string) {
        this.socialSharing.share(message, '', image ? image : '', url? url : '');
    }

    ngOnInit() {
        this.newsService.getArticles().then((data: any) => {
            // alert(JSON.stringify());

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

        }, (err) => {
            console.log(err);
            this.toastService.presentToastWithOptions("Failed to get News data", "danger");
        });

        this.newsService.getVideos().then((data: any) => {
            
            if (this.platform.is('android') || this.platform.is('capacitor')) {
                this.videoData = JSON.parse(data.data)['content'].items;
            } else {
                this.videoData = data.content.items;
            }
            
        }, (err) => {
            this.toastService.presentToastWithOptions("Failed to get Videos data", "danger");
        });

        this.newsService.getGalleries().then((data: any) => {
            
            if (this.platform.is('android') || this.platform.is('capacitor')) {
                this.galleryData = JSON.parse(data.data)['content'].items;
            } else {
                this.galleryData = data.content.items;
            }

        }, (err) => {
            console.log(err);
            this.toastService.presentToastWithOptions("Failed to get Gallery data", "danger");
        });
    }    

    ionViewDidEnter() {
        if (localStorage.isPartyChatOn === 'yes') {
            this.showChat = true;
        }
    }
    
    getIndex(e: any) {
        console.log(this.slides);
    }

    showNewsDetails(alias_title: string) {
        this.router.navigate(['/home-details', { alias_title: alias_title, type: this.selectedTab }]);
    }

    
}