import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, ModalController } from '@ionic/angular';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;


@Component({
  selector: 'app-fan-zone',
  templateUrl: './fan-zone.page.html',
  styleUrls: ['./fan-zone.page.scss'],
})
export class FanZonePage implements OnInit {
    @ViewChild('slides') slides: IonSlides;

    showPolls: boolean = false;

    emojis = ['assets/icons/emojis/heart.png', 'assets/icons/emojis/laughing.png', 'assets/icons/emojis/surprised.png', 'assets/icons/emojis/thumb-up.png'];

    showSlides: boolean = false;

    fanStories: Array<{
        profileImage: string,
        name: string,
        storyImage: string,
        likeCount: number,
        opened: boolean,
    }>;

    selectedEmoji: string = '';

    emojiBuffer: Array<{
        emoji: string,
        positionX: number,
        positionY: number,
        size: number,
    }> = [];

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

    version: string = '';

    constructor(
        private modalController: ModalController,
        private appVersion: AppVersion
    ) { }

    async ngOnInit() {
        // this.version += await this.appVersion.getAppName() + ', Code: ' + await this.appVersion.getVersionCode() + ', Version Number: ' + await this.appVersion.getVersionNumber();

        this.version += 'Version Number: ' + await this.appVersion.getVersionNumber();
    }

    async openIAB(url: string) {
        await Browser.open({ url: url, windowName: 'Punjab Kings Fan-Zone Shop', toolbarColor: '#485dbf', presentationStyle: 'popover' });
    }
    
    ngAfterViewInit() {
                
    }

    goToSlide(index: number) {
        this.slides.slideTo(index);
    }

    updateStory() {
        this.slides.getActiveIndex().then((index) => {
            this.fanStories[index].opened = true;
        });
    }

    onLoginError(err) {
        console.log(err);
    }

    reversed(data: Array<any>) {
        return data.reverse();
    }

}
