import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, ModalController } from '@ionic/angular';
import { Router } from '@angular/router';
import { ChatPage } from '../chat/chat.page';

export type INews = {
    id: string | number,
    image: string,
    heading: string,
    description: string,
    type: 'VIDEO' | 'ARTICLE',
    likes: number,
    isBookmarked: boolean,
    isLiked: boolean,
    videoLink?: string,
    comments: Array<{
        user: string,
        comment: string,
        likes: number,
        isLiked: boolean
    }>,
};

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

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

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

    newsData: Array<INews> = [];
    videoData: Array<INews> = [];
    exclusiveData: Array<INews> = [];

    showChat: boolean = false;

    constructor(
        private router: Router,
        private modalController: ModalController,
    ) { }

    ngOnInit() {
        this.newsData = [{
            id: 1,
            image: 'https://www.kxip.in/static-assets/waf-images/c3/b2/7d/16-9/DWWfHZsFg1.jpg',
            heading: 'Power packed Pooran claims season best score in 2021 T10 League',
            description: `<strong> The southpaw scored 89 off just 26 balls to lead from the front in the T10 League. </strong> <br> <br>
            Nicholas Pooran proved to be head and shoulders above the rest on Sunday in the 2021 T10 League, as a glitzy knock of 89 off just 26 balls helped his team Northern Warriors shrug aside the Bangla Tigers. The win has put Pooran’s team top of their group after three games, in good stead to make it to the qualifiers. <br> <br>
            Batting first of the night, the Northern Warriors lost opener Waseem Muhammad in just the second over. What followed however was complete dominance from the Warriors batsmen, as Pooran and Lendl Simmons stitched together a 122 run partnership. The Kings XI Punjab batsman lit up the Abu Dhabi night sky in a spectacular display of power hitting.<br> <br>
            Pooran smashed 12 sixes and three fours in that innings, as he went all guns blazing against the Bangla Tigers bowlers. The 25-year-old showed his intent right from the get go, getting a six over square leg off just his fourth ball. He carried on from that, targeting Qais Ahmed’s first over to get three sixes and a four from that.
            `,
            type: 'ARTICLE',
            likes: 10,
            isLiked: false,
            isBookmarked: false,
            comments: [{
                user: 'kxipFan',
                comment: 'Yay!',
                likes: 2,
                isLiked: true,
            }, {
                user: 'SehwagFan',
                comment: 'finally!',
                likes: 5,
                isLiked: false,
            }]
        }, {
            id: 2,
            image: 'https://www.kxip.in/static-assets/waf-images/1b/aa/00/16-9/Xv9C55Ux0g.jpeg',
            heading: '16 players retained by Kings XI Punjab for IPL 2021',
            description: `<strong> The franchise have decided to release nine players ahead of the auction slated to be held next month. </strong> <br> <br>
            Kings XI Punjab have announced their list of retained players for the 2021 Dream11 Indian Premier League, with 16 cricketers making that cut. The list sees the bulk of their core team retained as last season’s captain KL Rahul, opening partner Mayank Agarwal and explosive Caribbean duo of Chris Gayle and Nicholas Pooran have all been retained. <br> <br>
            <strong> Retained players </strong>: KL Rahul, Chris Gayle, Mayank Agarwal, Nicholas Pooran, Mandeep Singh, Sarfaraz Khan, Deepak Hooda, Prabhsimran Singh, Mohammed Shami, Chris Jordan, Darshan Nalkande, Ravi Bishnoi, Murugan Ashwin, Arshdeep Singh, Harpreet Brar, Ishan Porel <br> <br>
            <strong> Released players </strong>: Glenn Maxwell, Karun Nair, Hardus Viljoen, Jagadeesha Suchith, Mujeeb ur Rahman, Sheldon Cottrell, Jimmy Neesham, Krishnappa Gowtham, Tajinder Singh.`,
            type: 'ARTICLE',
            isLiked: false,
            isBookmarked: false,
            likes: 308,
            comments: []
        }];

        this.videoData = [{
            id: 1,
            image: 'https://i.ytimg.com/vi/4NU0HtDakgo/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBjqUDuxgu-GEduxPmXl21pi_7GqQ',
            heading: 'Head Coach Anil Kumble on the players retained!',
            description: `"The plan was to retain the core" - Head Coach Anil Kumble on the players retained, released and more... 🗣 <br> <br>
            <strong> #IPL2021​ #SaddaPunjab </strong>`,
            type: 'VIDEO',
            videoLink: 'https://www.youtube.com/embed/4NU0HtDakgo',
            isLiked: false,
            isBookmarked: false,
            likes: 1108,
            comments: []
        }, {
            id: 2,
            image: 'https://i.ytimg.com/vi/0WyRVn1rXLM/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAiUlof7rRoAz1tuIwAUjfshSu1Gw',
            heading: 'Dart Challenge with the Kings!',
            description: `Bullseye with the Kings! 🎯 <br> <br> 
            PS: Don't miss the end 😋 <br> <br> 
            <strong> #SaddaPunjab​ #KXIP </strong>`,
            type: 'VIDEO',
            videoLink: 'https://www.youtube.com/embed/0WyRVn1rXLM',
            isLiked: true,
            isBookmarked: false,
            likes: 2101,
            comments: [{
                user: 'kxipFan',
                comment: 'Cant wait till IPL starts!, Vamos KXIP!',
                likes: 2,
                isLiked: true,
            }]
        }];
        
        this.exclusiveData = [{
            id: 1,
            image: 'https://www.kxip.in/static-assets/waf-images/b2/1a/6a/16-9/d7diD3xdHN.jpg',
            heading: 'What makes a good fielder, explained by Jonty Rhodes',
            description: `<strong> KXIP’s fielding coach reveals the one tip that can make anyone a better fielder.</strong> <br> <br>
            Kings XI Punjab were electric on the field last night, as they managed to defend a meagre total of 127 runs against Sunrisers Hyderabad in the 2020 Dream11 Indian Premier League. KL Rahul’s side managed to hold on to eight catches in the outfield in that game, and were sharp with their ground fielding as well, to give the franchise a memorable win and keep their hopes alive to make it to the playoffs. <br> <br>
            Kings XI Punjab’s fielding coach Jonty Rhodes has so far been reluctant to take any credit for his side performing so admirably on the field, but the talisman former South African cricketer’s influence surely seems to have rubbed off on the team. In an exclusive interview with KXIP.in, Rhodes- who was an extraordinary fielder himself in his playing days, revealed what makes a good fielder and what probably has helped KXIP be so dominant in the field.<br> <br>
            “Everyone is built differently, everyone’s got different roles in the team, but the one attribute that makes anyone a better fielder is expecting every ball to come to you,” reveals Jonty Rhodes. “It can make you a better fielder even without practicing catching or throwing.” <br> <br>
            “Commentators back then used to talk about my good ‘anticipation’ while playing. And I didn’t have faster reflexes than the others, or I would have been a much better batsman. So it wasn’t a case of me seeing the ball earlier, I just expected each game to come to me. I was ready before the ball was hit,” added KXIP’s fielding coach. <br><br>
            “It's only 120 balls, so it is very easy to switch on and switch off, but if you are expecting every ball to come to you no matter where you are fielding, you will be an excellent fielder,” clarified Rhodes. 
            `,
            type: 'ARTICLE',
            isLiked: false,
            isBookmarked: false,
            likes: 1108,
            comments: []
        }];
    }

    ionViewDidEnter() {
        if (localStorage.isPartyChatOn === 'yes') {
            this.showChat = true;
        }
    }

    async presentChatModal() {
        const modal = await this.modalController.create({
          component: ChatPage,
        });
        return await modal.present();
    }

    getIndex(e: any) {
        console.log(this.slides);
    }

    showNewsDetails(news: any) {
        this.router.navigate(['/home-details', { news: JSON.stringify(news) }])
    }

    
}
