import { lang } from "../index.js";
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";

export class TicTacToeOfflineView extends AbstractAuthenticatedView
{
    constructor(params)
	{
        super(params, "ticTacToeTitle");
		this.width = 510;
		this.height = 510;
		this.morpion = [[],[],[],[],[],[],[],[],[]];
		this.rectsize = 48;
		this.gap = 40;
		this.playerTurn = 0;
		this.playerOneCurrentTab = 4;
		this.playerTwoCurrentTab = 4;
		this.Winner = -1;
    }

	async leavePage()
	{
		this.canvas.removeEventListener("mousedown", this.onClick, false);
	}

	onClick(event)
	{
		let targetTabX, targetTabY, targetTab;
		let squareTab;
		let x = event.offsetX;
		let y = event.offsetY;

		if (this.Winner != -1)
			return;

		function findPlace(x, morpion)
		{	
			if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
				return -1;
			if (x <= morpion.gap + morpion.rectsize * 3)
				return 0;
			if (x >= morpion.gap + morpion.rectsize * 3 && x <= morpion.gap + morpion.rectsize * 6)
				return 1;
			if (x >= morpion.gap + morpion.rectsize * 6)
				return 2;
			return -1;
		}

		function drawNewCase(targetTab, squareTab, morpion)
		{
			let targetX = (morpion.gap + targetTab % 3 * morpion.rectsize * 3) + (squareTab % 3 * morpion.rectsize);
			let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize);
			if (!morpion.playerTurn)
			{
				morpion.ctx.beginPath();
				morpion.ctx.strokeStyle = "green";
				morpion.ctx.moveTo(targetX + 10, targetY + 10);
				morpion.ctx.lineTo(targetX + 40, targetY + 40);
				morpion.ctx.moveTo(targetX + 40, targetY + 10);
				morpion.ctx.lineTo(targetX + 10, targetY + 40);
				morpion.ctx.stroke();
				morpion.ctx.closePath();
			}
			else
			{
				morpion.ctx.beginPath();
				morpion.ctx.strokeStyle = "red";
				targetX += morpion.rectsize / 2;
				targetY += morpion.rectsize / 2;
				morpion.ctx.arc(targetX, targetY, 15, 0, 2 * Math.PI);
				morpion.ctx.stroke();
				morpion.ctx.closePath();
			}
		}

		function PaintCurrentTab(morpion, currentTab, color)
		{
			let targetX = (morpion.gap + currentTab % 3 * morpion.rectsize * 3);
			let targetY = (morpion.gap + Math.floor(currentTab / 3) * morpion.rectsize * 3);

			morpion.ctx.beginPath();
			morpion.ctx.strokeStyle = color;
			morpion.ctx.lineWidth = 6;
			morpion.ctx.strokeRect(targetX, targetY, morpion.rectsize * 3, morpion.rectsize * 3);
			morpion.ctx.closePath();

		}

		function highlightNewTab(morpion)
		{
			if (!morpion.playerTurn)
				PaintCurrentTab(morpion, morpion.playerOneCurrentTab, "green");
			else
				PaintCurrentTab(morpion, morpion.playerTwoCurrentTab, "red");
		}

		function checkForWinningMove(morpion, targetTab) 
		{
			let count = 0;
			
			for (let i = 0; i < 3; i++)
			{
				if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 3] && morpion.morpion[targetTab][i + 3] === morpion.morpion[targetTab][i + 6]))
					morpion.Winner = !morpion.playerTurn;
			}
			for (let i = 0; i < morpion.morpion.length; i += 3)
			{
				if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 1] && morpion.morpion[targetTab][i + 1] === morpion.morpion[targetTab][i + 2]))
					morpion.Winner = !morpion.playerTurn;
			}
			if (morpion.morpion[targetTab][0] != -1 && (morpion.morpion[targetTab][0] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][8]))
				morpion.Winner = !morpion.playerTurn;
			if (morpion.morpion[targetTab][2] != -1 && (morpion.morpion[targetTab][2] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][6]))
				morpion.Winner = !morpion.playerTurn;
			morpion.morpion[targetTab].forEach((v) => (v !== -1 && count++));
			if (count == 9 && morpion.Winner == -1)
				morpion.Winner = morpion.playerTurn;
		}

		function paintWinningNotification(morpion)
		{
			morpion.ctx.beginPath();
			morpion.ctx.fillStyle = "white";
			morpion.ctx.fillRect(morpion.width / 2 - 200, morpion.height - morpion.gap + 10, 400, 80);
			morpion.ctx.closePath();
			morpion.ctx.beginPath();
			morpion.ctx.fillStyle = (morpion.Winner) ? "red" : "green";
			morpion.ctx.fillText((morpion.Winner) ? "Winner is : O" : "Winner is : X", morpion.width / 2 - 30, morpion.height - morpion.gap / 2, 140);
			morpion.ctx.closePath();
		}

		function updateMorpion(targetTab, squareTab, morpion)
		{
			if (morpion.playerTurn && targetTab != morpion.playerTwoCurrentTab)
				return -1;
			if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab)
				return -1;
			if (morpion.morpion[targetTab][squareTab] == -1)
			 	morpion.morpion[targetTab][squareTab] = (morpion.playerTurn) ? 1 : 0;
			else
				return -1;
			drawNewCase(targetTab, squareTab, morpion);
				morpion.playerTurn = !morpion.playerTurn;
			PaintCurrentTab(morpion, targetTab, "white");
			if (!morpion.playerTurn)
				morpion.playerTwoCurrentTab = squareTab;
			else
				morpion.playerOneCurrentTab = squareTab;
			checkForWinningMove(morpion, targetTab);
			if (morpion.Winner != -1)
			{
				paintWinningNotification(morpion);
				return;
			}
			highlightNewTab(morpion);
			return 0;
		}
		
		function findSquare(x, gap, morpion)
		{
			if (x <= gap + morpion.rectsize)
				return 0;
			if (x >= gap + morpion.rectsize && x <= gap + morpion.rectsize * 2)
				return 1;
			if (x >= gap + morpion.rectsize * 2)
				return 2;
			return -1;
		}

		targetTabX = findPlace(x, this);
		targetTabY = findPlace(y, this);
		if (targetTabX < 0 || targetTabY < 0)
			return -1;
		targetTab = targetTabX + targetTabY * 3;
		squareTab = findSquare(x, this.rectsize * 3 * targetTabX + this.gap, this) + findSquare(y, this.rectsize * 3 * targetTabY + this.gap, this) * 3;
		updateMorpion(targetTab, squareTab, this);
	}

	async postInit()
	{
		for (let i = 0; i < 9; i++)
			for (let j = 0; j < 9; j++)
				this.morpion[i].push(-1);
		this.canvas = document.getElementById("Morpion");
		this.ctx = this.canvas.getContext("2d");
		this.ctx.fillStyle = "black";
		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
		for (let i = 1, x = this.gap, y  = this.gap; i <= 9; i++)
		{
			this.DrawMorpion(x, y);
			x += this.rectsize * 3;
			if (i % 3 == 0)
			{
				y += this.rectsize * 3;
				x = this.gap;
			}
		}
		this.ctx.lineWidth = 6;
		for (let i = 0; i < 4; i++)
		{
			this.ctx.beginPath();
			this.ctx.strokeStyle = `rgb(230 230 230)`;
			this.ctx.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
			this.ctx.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
			this.ctx.stroke();
			this.ctx.closePath();
		};
		for (let i = 0; i < 4; i++)
		{
			this.ctx.beginPath();
			this.ctx.strokeStyle = `rgb(230 230 230)`;
			this.ctx.moveTo(this.gap, this.gap + i * this.rectsize * 3);
			this.ctx.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
			this.ctx.stroke();
			this.ctx.closePath();
		}
		this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
	}

	DrawMorpion(start_x, start_y)
	{
		this.ctx.beginPath();
		this.ctx.strokeStyle = `rgb(200 200 200)`;
		for (let i = 1, x = 0, y = 0; i <= 9; i++)
		{
			this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
			x += this.rectsize;
			if (i % 3 == 0)
			{
				y += this.rectsize;
				x = 0;
			}
		}
		this.ctx.closePath();
	}

    async getHtml() 
	{
        return `
			<link rel="stylesheet" href="/static/css/tictactoe.css">
			<h1>${lang.get('ticTacToeTitle')}</h1>
			<div style="display: flex">
				<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
			</div>
			<div id="rule">
				<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
				<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
				<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
				<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
			</div>
		`;
    }
}