import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams, ToastController, PopoverController} from 'ionic-angular';
import { UsersService } from '../../providers/users-service';
import { PopoverComponent } from '../../components/popover/popover';
 
@IonicPage()
@Component({
  selector: 'page-my-games',
  templateUrl: 'my-games.html',
})
export class MyGamesPage {
    games: any;
    filteredGames: any;
    userId: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public usersService: UsersService, public popoverCtrl:PopoverController) {
    console.log(navParams.get('id'));
    this.userId = navParams.get('id');
  }
  
    ionViewDidLoad() {
      this.usersService.getUsersGames(this.userId).subscribe(games=>{
        this.filteredGames = games;
        this.games = games;
      })
      ;
    }

    getItems(ev: any) {
      // Reset items back to all of the items
      this.filteredGames = this.games;
      // set val to the value of the searchbar
      const val = ev.target.value;
      // if the value is an empty string don't filter the items
      if (val && val.trim() != '') {
        this.filterGamesBySearch(val);
      }
    }

  filterGamesBySearch(searchTerm){
    this.filteredGames = this.games.filter((games) => {
        return games.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });    
  }

  doAddToPlayedList() {
    let toast = this.toastCtrl.create({
      message: 'Game Added To PlayedGames',
      duration: 2000,
      position: 'bottom'
    });
    toast.present();
  }

  presentPopover(game) {
    const popover = this.popoverCtrl.create(PopoverComponent,game);
    console.log(game);
    popover.present();
  }
}
