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';

@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 = {};

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

    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>');
    }

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

        // type 'news' | 'videos' | 'gallery'

        console.log(alias_title);
        console.log(type);

        if (type === 'news') {
            this.newsService.getArticleDetails(alias_title).then((data: any) => {
                this.newsDetails = JSON.parse(data.data)['content'].data;

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

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

                this.newsDetails = JSON.parse(data.data)['content'].data;

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

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

                this.newsDetails = JSON.parse(data.data)['content'].data;

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

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

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

}
