import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { AngularFireAuth } from "@angular/fire/auth";
import firebase from 'firebase/app';
import { Router } from '@angular/router';

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

    constructor(
        public  afAuth:  AngularFireAuth,
        private router: Router
    ) { }

    async loginWithGoogle() {
        await  this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((data) => {
            this.googleUserData = {
                name: data.user.displayName,
                email: data.user.email,
                profileImage: data.user.photoURL,
                credentials: data.credential
            };
            localStorage.googleUserData = JSON.stringify(this.googleUserData);
            this.showSocialLogin = false;
        }, (err) => {
            alert("Failed to login");
            this.showSocialLogin = true;
        });
    }

    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() {
        if (localStorage.googleUserData) {
            this.googleUserData = JSON.parse(localStorage.googleUserData);
            this.showSocialLogin = false;
        } else {
            this.showSocialLogin = true;
        }
    }

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

}
