import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Location } from '@angular/common';

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

    selectedIndex: number = 0;

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

    collections: Array<{
        name: string,
        details: string,
        image: string,
        type: 'BAT' | 'BALL' | 'INVERTED BAT'
    }> = [];

    showGrid: boolean = false;

    constructor(
        private location: Location
    ) { }

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

    ngOnInit() {
        this.collections = [{
            name: 'Wooden Bat',
            details: 'Signed by Sehwag',
            image: 'assets/collections/bat.png',
            type: 'BAT'
        }, {
            name: 'Leather Ball',
            details: 'Signed by Sehwag',
            image: 'assets/collections/ball.png',
            type: 'BALL'
        }, {
            name: 'Golden Bat',
            details: 'Oracle of IPL award',
            image: 'assets/collections/golden-bat.png',
            type: 'INVERTED BAT'
        }];
    }

    goToCollection(index: number) {
        this.showGrid = false;
        setTimeout(() => {
            this.slides.slideTo(index);
        }, 200);
    }

}
