const ctx = canvas.getContext('2d');
const canvasLeft = canvas.offsetLeft + canvas.clientLeft;
const canvasTop = canvas.offsetTop + canvas.clientTop;

const cardWidth = 240;
const cardHeight = 360;

const cards = new Image();
const back = new Image();


let clickableItems = [];
console.log(clickableItems);


class Board{
	constructor(){
		console.log('initBoard');
		ctx.font = "12px Arial";
		canvas.style.backgroundColor = 'rgb(143 153 150)';
		cards.src = 'images/deck.svg';
		back.src = 'images/uno.svg';
		ctx.fillStyle = '#000';
	}

	drawBoard(){
		console.log('drawBoard');
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		// Room Name
		ctx.fillText(name, 0, 10);

		this.drawDeck();
		this.drawDeckOpponent();


		this.drawPlayerNames('Nathan', 'Evil Nathan');
	}

	drawPlayerNames(playerName, opponentName = false){
		console.log('drawPlayerNames');

		// Player Name
		ctx.fillText(playerName, 50, canvas.height - 110);

		// Opponent's Name
		if(!opponentName){
			// Just clear the name
		}else{
			ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 110);
		}
	}

	drawDeck(){
		// Deck
		clickableItems['deckSprite'] = new Shape({
			name: 'deck',
			x: canvas.width-cardWidth/2-40,
			y: canvas.height-cardHeight/2-60,
			width: cardWidth/2,
			height: cardHeight/2,
			fillStyle: "#0000FF"
		});
		clickableItems['deckSprite'].draw();
		let deckCounterSprite = new Circle({
			name: 'deckCounter',
			x: canvas.width-cardWidth/5,
			y: canvas.height-cardHeight/5,
			width: cardWidth/8,
			height: cardHeight/8,
			fillStyle: "#FFF"
		});
		deckCounterSprite.draw();
		let cardsInDeck = 60;
		// TODO: Center in the circle
		ctx.fillText(cardsInDeck, canvas.width-cardWidth/5 - (ctx.measureText(cardsInDeck).width) + 7, canvas.height-cardHeight/5 + 5);
		//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
	}
	drawDeckOpponent(){
		// Opponent's Deck
		let deckSprite = new Shape({
			name: 'deckOpponent',
			x: 40,
			y: 60,
			width: cardWidth/2,
			height: cardHeight/2,
			fillStyle: "#FF0000"
		});
		deckSprite.draw();
		let deckCounterSprite = new Shape({
			shape: 'circle',
			name: 'deckCounterOpponent',
			x: cardWidth/2+(cardWidth/8),
			y: cardHeight/2+(cardHeight/8),
			width: cardWidth/8,
			height: cardHeight/8,
			fillStyle: "#FFF"
		});
		deckCounterSprite.draw();
		let cardsInDeck = 60;
		// TODO: Center in the circle
		ctx.fillStyle = '#000';
		ctx.strokeStyle = '#000';
		ctx.fillText(cardsInDeck, cardWidth/2 + (ctx.measureText(cardsInDeck).width) + 10, cardHeight/1.58);
	}

	// Naming's getting awkward here...
	// Draw the card
	drawCardSprites(){

	}

	drawCardSpritesOpponent(){

	}
	// Draw a card, traditional TCG
	drawACard(){

	}
	drawACardOpponent(){

	}
}

// Run board commands here for testing
let board = new Board;
//board.initBoard();

board.drawBoard();

canvas.addEventListener('mousemove', function(event) {
	var x = event.pageX - canvasLeft,
	    y = event.pageY - canvasTop;

	console.log('X: '+x+' Y: '+y);

	// Collision detection between clicked offset and clickableItems
	// https://stackoverflow.com/a/9880302
	clickable = clickableItems['deckSprite'];
	console.log(clickableItems['deckSprite']);

	if (
		y > clickable.y && y < clickable.y + clickable.height
		&& x > clickable.x && x < clickable.x + clickable.width
	) {
		console.log('HUUUH');
	}

}, false);