var colorr = 0;


var Game = {
	cards: [],
	selected: [],
	setCards: [],
	nbSets: 0,
	score: 0,
	$board: $('[data-display="game-board"]'),
	$score: $('[data-display="score"]'),
	$nbSets: $('[data-display="nbSets"]'),




	deal: function() {
		var self = this;
		if (colorr === 0 || colorr === null) {
			// ajax request to get initial set of cards
			var dealRequest = $.ajax({
				url: 'set.php?action=deal',
				type: 'GET',
				dataType: 'json',
				success: function(data) {
					self.cards = data;
					self.displayCards.call(self);
					self.existingSet();
					self.setCardListeners();
					self.setPageListeners();
				}
			});
		}else if (colorr === 1){
			var dealRequest1 = $.ajax({
				url: 'set.php?action=deal1',
				type: 'GET',
				dataType: 'json',
				success: function(data) {
					self.cards = data;
					self.displayCards.call(self);
					self.setCardListeners();
					self.setPageListeners();
				}
			});
		}

	},

	displayCards: function() {
		var self = this;



		$.each(this.cards, function(index, card){
			var cardNode = $('<div>');
			cardNode.addClass('card');
			$(cardNode).data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'number': card.number
			});

			//var Canvas_width=100;
			//var Canvas_height=200;

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);
			/*var canvasContext=shapeNode[0].getContext("2d");
			canvasContext.beginPath();

			canvasContext.rect(0, 0, Canvas_width, Canvas_height);
			canvasContext.fillStyle = "#000000";
			canvasContext.fill();*/

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board.append($('<div>'));
			}

			/*colors = $.map(cardNode, function(ele) { return $(ele).data("color");});
			shapes = $.map(cardNode, function(ele) { return $(ele).data("shape"); });
			fills= $.map(cardNode, function(ele) { return $(ele).data("fill"); });
			numbers = $.map(cardNode, function(ele) { return $(ele).data("number"); });*/


		});

	},



	existingSet: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards;
		var cartes1 = cartes;
		var cartes2 = cartes;
		var cpt=0;


		var carte1;
		var carte2;
		var carte3;

		//var a[1] = cartes[0];
		//console.log(a);

		var i, j, k;
		var isSet = [];


		for(i=0; i<cartes.length-2; i++) {
			//isSet.splice(0, 1, cartes[i]);
			for (j = i+1; j < cartes1.length-1; j++) {
				for (k = j+1; k < cartes2.length; k++) {
					carte1 = cartes[i];
					carte2 = cartes1[j];
					carte3 = cartes2[k];

					//console.log(carte1, carte2, carte3);
					//console.log(i, j , k);

					colors.splice(0,1,carte1.color);
					colors.splice(1,1,carte2.color);
					colors.splice(2,1,carte3.color);

					shapes.splice(0,1,carte1.shape);
					shapes.splice(1,1,carte2.shape);
					shapes.splice(2,1,carte3.shape);

					fills.splice(0,1,carte1.fill);
					fills.splice(1,1,carte2.fill);
					fills.splice(2,1,carte3.fill);

					numbers.splice(0,1,carte1.number);
					numbers.splice(1,1,carte2.number);
					numbers.splice(2,1,carte3.number);


					valid = self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers);

					if (valid) {
						cpt = cpt + 1;
					}
					//console.log(valid);
				}
			}
		}
		//console.log(carte1, carte2,carte3);
		this.$nbSets.html(cpt);
	},



	setCardListeners: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard(card);
			} else {
				self.selectCard(card);
			}

			if (self.selected.length === 3) {
				self.silentSubmission();
			}
		});
	},

	setPageListeners: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections.call(self);
		});
	},




	selectCard: function(card) {
		$(card).addClass('selected');
		this.selected.push(card);

		if (this.selected.length > 3) {
			this.clearSelections.call(this);
		}

	},


	deselectCard: function(card) {
		var self = this;
		var index = self.selected.indexOf(card);
		if (index > -1) {
			self.selected.splice(index, 1);
		}
		$(card).removeClass('selected');
	},

	clearSelections: function() {
		$.each(this.selected, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected = [];
	},


	validateSet: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers));
	},

	isSet: function(arr) {
		var unique = [];
		$.each(arr, function(i, el){
			if($.inArray(el, unique) === -1) unique.push(el);
		});

		//console.log(unique);
		return unique.length === 1 || unique.length === 3;

	},

	silentSubmission: function() {
		var valid = this.validateSet();
		if (valid) {
			this.submitSet();
		}


	},

	submitSet: function() {
		var self = this;
		var ids = $.map(self.selected, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards(ids);
				// to do - implement game complete check on server
				if (!data.gameComplete) {
					self.updateCards(data);
					self.existingSet();
					self.increaseScore();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections();
	},

	clearCards: function(ids) {
		// remove submitted cards game's card array and clear the board
		var self = this;
		this.selected = [];
		this.$board.empty();
		var cardIds = $.map(self.cards, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards.splice(location, 1);
			}
		});
	},

	updateCards: function(newCards) {
		this.cards = this.cards.concat(newCards);
		this.displayCards();
	},

	increaseScore: function() {
		this.$score.html(++this.score);
	},

	startRound: function() {
		// todo
		// reset timer to 30 seconds
	},

	gameWon: function() {
		alert("you won!");
	},

	gameLost: function() {
		alert("you lost :(");
	}



};



$(document).ready(Game.deal());

/*
var canvases = $( ".red" );

for (let canvas of canvases) {
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 100, 100);
}

/*
var canvases = document.getElementsByClassName('shape diamond red solid');
console.log(canvases);
for (let canvas of canvases) {
	var context = canvas.getContext('2d');

	drawDiamond(context, 50, 50, 75, 100);
	canvas.fillStyle("#FF0000");
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}


function drawDiamond(context, x, y, width, height){
	context.save();
	context.beginPath();
	context.moveTo(x, y);
	// top left edge
	context.lineTo(x - width / 2, y + height / 2);
	// bottom left edge
	context.lineTo(x, y + height);
	// bottom right edge
	context.lineTo(x + width / 2, y + height / 2);

	// closing the path automatically creates
	// the top right edge
	context.closePath();

	context.fillStyle = "red";
	context.fill();
	context.restore();
}*/