import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, ModalController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { ArFanCamPage } from '../ar-fan-cam/ar-fan-cam.page';


@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,
    };

    googleUserData: any = { };
    showSocialLogin: boolean = true;



    public loading: any;
    public isGoogleLogin = false;
    public user = null;


    constructor(
        private platform: Platform,
        private modalController: ModalController,
    ) { }

    async ngOnInit() {

        this.fanStories = [{
            name: 'Amarpreet',
            likeCount: 230,
            profileImage: 'https://th.bing.com/th/id/OIP.AAvPtBwt0-1npE8vxTgTeQHaHa?pid=Api&rs=1',
            storyImage: 'https://www.kxip.in/static-assets/waf-images/43/75/3e/16-9/796-597/sG5PGkS0K7.jpg',
            opened: false,
        }, {
            name: 'Prem',
            likeCount: 230,
            profileImage: 'https://m.media-amazon.com/images/M/MV5BMmNkMjNkZmEtYWNhYS00ZjI0LTkzZTktZmViODI1NmI0ZmMyXkEyXkFqcGdeQXVyMTM1ODM2MjM@._V1_UY317_CR130,0,214,317_AL_.jpg',
            storyImage: 'https://i.pinimg.com/originals/dd/78/64/dd78643b1b2980bcfa83daa2d188fa91.jpg',
            opened: false,
        }];
    }
    
    ngAfterViewInit() {
                
    }

    generateEmojiStream() {

        this.emojiBuffer = [];

        for (let i = 0; i < 150; i += 1) {
            this.emojiBuffer.push({
                emoji: this.selectedEmoji,
                positionX: Math.floor((Math.random()) * 100),
                positionY: Math.floor((Math.random()) * 100),
                size: Math.floor((Math.random()) * 60),
            });
        }


        setTimeout(() => {
            this.selectedEmoji = '';
            this.emojiBuffer = [];
        }, 2100);
    }

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

    async presentCamModal() {
        const modal = await this.modalController.create({
          component: ArFanCamPage,
        });

        modal.onDidDismiss().then((data: any) => {
            if (data.data && data.data.imageData) {
                this.fanStories.push({
                    profileImage: this.googleUserData.profileImage,
                    name: this.googleUserData.name,
                    storyImage: data.data.imageData,
                    likeCount: 1,
                    opened: false
                });
            }
        });

        return await modal.present();
    }

}
