gsap.registerPlugin(Flip);

const pieces = gsap.utils.toArray(".piece");
const topEl = document.getElementById("top");
const gridItems = Array.from(document.getElementById("grid").children);

const slide = (event) => {
	// first
	const states = gridItems.map((el) => Flip.getState(el));
	const topState = Flip.getState(topEl);
	// last
	topEl.classList.add("side");
	gsap.set(pieces, { "transition-duration": "0.3s" });
	// Play
	Flip.from(topState, {
		duration: 1,
		delay: 0.4 + 0.1 * 5,
		ease: "back.out(1.7)"
	});
	states.forEach((state, i) => {
		Flip.from(state, {
			duration: 0.4,
			scale: i > 0,
			delay: 0.1 * i,
			ease: "power2.easeIn"
		});
	});
};

let selected, aniID;

const board = document.getElementById("cube");

const rotateBoard = (id) => {
	id = id.replace("p-", "");

	let coords = {
		pawn: [0, 0],
		queen: [0, 1],
		king: [1, 0],
		bishop: [0, 2],
		knight: [-1, 0],
		rook: [0, -1]
	}[id];

	gsap.to(".scale", {
		ease: "sine.inOut",
		delay: selected ? 0 : 0.6,
		keyframes: [
			{ scale: 0.8, duration: 0.2 },
			{ duration: 0.8 },
			{ scale: 1, duration: 0.2 }
		]
	});

	gsap.to(board, {
		ease: "sine.inOut",
		delay: selected ? 0 : 0.6,
		onComplete: function () {
			if (aniID) {
				aniID = id;
			} else {
				aniID = id;
				runAnimation();
			}
		},
		keyframes: [
			{ duration: 0.2 },
			{
				duration: 0.8,
				rotateX: 90 * coords[0],
				rotateY: 90 * coords[1]
			}
		]
	});
};

pieces.forEach((el) => {
	el.addEventListener("click", (e) => {
		if (selected) {
			selected.classList.remove("selected");
		}
		!selected && slide(e);
		if (selected !== el) {
			rotateBoard(el.id);
			el.classList.add("selected");
			selected = el;
		}
	});
});

function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min) + min);
}

function getPossibleMoves(piece) {
	// grid size
	let g = 7;
	// piece position
	let x = piece.pos[0],
		y = piece.pos[1];

	// options:
	let opts = [
		// 0: top left
		Math.min(y, x) - 1,
		// 1: top
		y - 1,
		// 2: top right
		Math.min(y, g + 1 - x) - 1,
		// 3: right
		g - x,
		// 4: bottom right
		g - Math.max(y, x),
		// 5: bottom
		g - y,
		// 6: bottom left
		g - Math.max(y, g + 1 - x),
		// 7: left
		x - 1
	];

	// moves
	let moves = [];
	for (let i = 0; i < piece.dirs.length; i++) {
		if (opts[piece.dirs[i]] > (piece.min || 0)) {
			moves.push({
				dir: piece.dirs[i],
				dis: opts[piece.dirs[i]]
			});
		}
	}
	return moves;
}

function updatePiecePosition(piece, move, dis = 1) {
	if (piece.range >= move.dis) {
		dis = getRandomInt(1, move.dis + 1);
	}
	switch (move.dir) {
		case 0: // top left
			piece.pos[0] -= dis;
			piece.pos[1] -= dis;
			break;
		case 1: // top
			piece.pos[1] -= dis;
			break;
		case 2: // top right
			piece.pos[0] += dis;
			piece.pos[1] -= dis;
			break;
		case 3: // right
			piece.pos[0] += dis;
			break;
		case 4: // bottom right
			piece.pos[0] += dis;
			piece.pos[1] += dis;
			break;
		case 5: // bottom
			piece.pos[1] += dis;
			break;
		case 6: // bottom left
			piece.pos[0] -= dis;
			piece.pos[1] += dis;
			break;
		case 7: // left
			piece.pos[0] -= dis;
			break;
	}
}

const chessPieces = {
	pawn: {
		pos: [2, 2],
		d: 1,
		move() {
			if (this.pos[1] === 2) {
				this.d = 1;
				this.pos[1] += 2;
			} else {
				this.pos[1] += this.d;
			}
			if (this.pos[1] === 7) {
				this.d = -1;
			}
		}
	},
	knight: {
		pos: [4, 4],
		dirs: [0, 2, 4, 6],
		min: 2,
		move() {
			let moves = getPossibleMoves(this);
			let move = moves[getRandomInt(0, moves.length)];
			let x = getRandomInt(1, 3);
			let y = 3 - x;
			let xm = move.dir === 0 || move.dir === 6 ? -1 : 1;
			let ym = move.dir < 4 ? -1 : 1;
			this.pos[0] += x * xm;
			this.pos[1] += y * ym;
		}
	},
	rook: {
		pos: [4, 4],
		range: 7,
		dirs: [1, 3, 5, 7],
		move() {
			let moves = getPossibleMoves(this);
			let move = moves[getRandomInt(0, moves.length)];
			updatePiecePosition(this, move);
		}
	},
	bishop: {
		pos: [4, 4],
		range: 7,
		dirs: [0, 2, 4, 6],
		move() {
			let moves = getPossibleMoves(this);
			let move = moves[getRandomInt(0, moves.length)];
			updatePiecePosition(this, move);
		}
	},
	queen: {
		pos: [4, 4],
		range: 7,
		dirs: [0, 1, 2, 3, 4, 5, 6, 7],
		move() {
			let moves = getPossibleMoves(this);
			let move = moves[getRandomInt(0, moves.length)];
			updatePiecePosition(this, move);
		}
	},
	king: {
		pos: [4, 4],
		range: 1,
		dirs: [0, 1, 2, 3, 4, 5, 6, 7],
		move() {
			let moves = getPossibleMoves(this);
			let move = moves[getRandomInt(0, moves.length)];
			updatePiecePosition(this, move);
		}
	}
};

const getArea = (arr) => `${arr[1]} / ${arr[0]}`;

function runAnimation() {
	// call the update
	chessPieces[aniID].move();
	// get state
	let t = document.querySelector(`.target.${aniID}`),
		p = document.querySelector(`.chess-piece.${aniID}`);
	let tState = Flip.getState(t),
		pState = Flip.getState(p);
	// move the target to the next spot
	// move the piece to the next spot
	t.style.gridArea = getArea(chessPieces[aniID].pos);
	p.style.gridArea = getArea(chessPieces[aniID].pos);
	// flip
	Flip.from(tState, { duration: 0.5, ease: "power2.in" });
	Flip.from(pState, { duration: 0.75, delay: 0.4, ease: "sine.inOut" });
	// repeat
	setTimeout(runAnimation, 2000);
}