import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

import { GamesService } from '../games.service';
import {PageEvent} from '@angular/material';




@Component({
  selector: 'app-game-grid',
  templateUrl: './game-grid.component.html',
  styleUrls: ['./game-grid.component.css']
})
export class GameGridComponent implements OnInit {

	gameListSubscription;
	rawGamesContent;
	gamesData;

	queryFilters = "";
	querryPage = 1;
	queryOrder = "Title";

	length = 100;
	pageSize = 10;
	pageSizeOptions = [5, 10, 25, 50, 100];
	

	constructor(
		private route: ActivatedRoute,
		private gamesService: GamesService
  	){

	}

	ngOnInit() {
		this.getGamesList();
	}


	getGamesList(): any{

		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.pageSize ).subscribe( data => {
			this.length = data["_results"];
			this.gamesData = data.games;
		});
	}

	onKey( event: any ){
		if( event.target.value != "" ){
			this.gamesService.searchGamesByText( event.target.value ).subscribe( data => {
				this.gamesData = data.games;
			});
		}else{
			this.getGamesList();
		}
	}


	isEmptyObject(obj) {
		return (obj != undefined);
	}

	isNotEmptyObject(obj) {
		return (obj == undefined);
	}

	// MatPaginator Output
	pageEvent: PageEvent;

	paginatorChange(event){
		if( event.pageSize != this.pageSize ){
			this.pageSize  = event.pageSize;
			this.getGamesList();
		}
		if( event.pageIndex != (this.querryPage -1) ){
			this.querryPage = event.pageIndex+1;
			this.getGamesList();
		}
	}



}