const {
	Constants: {
		InteractionCallbackTypes: {
			CHANNEL_MESSAGE_WITH_SOURCE
		},
		MessageComponentButtonStyles: {
			SUCCESS,
			DANGER
		},
		ApplicationCommandOptionTypes: {
			USER
		},
		MessageFlags: {
			EPHEMERAL
		}
	},
	Utils: {
		Components,
		ComponentActionRow
	}
} = require("detritus-client");
const capitalize = require("lodash.capitalize");
const emoji = {
	"X": "❌",
	"O": "⭕",
	null: "⬛"
};

function renderButtons({ slashContext, board, renderBoard, currentPlayer }) {
	const rows = [
		new ComponentActionRow(),
		new ComponentActionRow(),
		new ComponentActionRow()
	];

	board.forEach((p, i) => {
		const r = i < 3 ? 0 : i < 6 ? 1 : 2;
		rows[r].addButton({
			// customId: i,
			// label: "click me",
			emoji: emoji[p],
			disabled: !!p,
			run: componentContext => {
				console.log(componentContext);
				try {
					console.log("THIS ACTUALLY RAN!!!!!!");
					board[i] = "X";
					// console.log(renderButtons(...arguments)[0].components[1].run.toString());
					renderBoard({ context: componentContext, board });
				} catch (err) {
					console.error(err);
				}
			}
		});
	});
	return rows;
}

module.exports = {
	name: "tictactoe",
	description: "Tic tac toe!",
	async run(slashContext, args) {
		const board = Array(9).fill(null);
		
		function renderBoard({ context, board }) {
			try {
				let description = "";
				board.forEach((p, i) => {
					description += ` ${p}`;
					if (i === 2 || i === 5) description += "\n";
				});

				const payload = {
					content: "press the buttons",
					flags: EPHEMERAL,
					// embed: {
					// 	description
					// },
					components: renderButtons({ slashContext: context, board, renderBoard })
				};
				// console.log(JSON.stringify(renderButtons({ slashContext, board, renderBoard }), null, 2));
				// console.log(payload);
				context.editOrRespond(payload).catch(console.error);
			} catch (err) {
				console.error(err);
			}
		}

		renderBoard({ context: slashContext, board });
	}
}