import * as status from "../../net/status.js"
import {joinGame, createGame} from "/scripts/net/netcode.js"
import { changeScene } from "/scripts/interface/scene.js"
import * as picker from "./picker.js"
import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"



function ID(id) {
	return document.getElementById(id)
}

const joinType = ID("joinType")
const joinGameMenu = ID("joinGame")
const createGameMenu = ID("createGame")

ID("gotoCreate").addEventListener("click", e => {
joinType.style.display = "none"
createGameMenu.style.display = ""
picker.create("createGameSelectColorBar", tileArray, [8, 16])
picker.create("createGameSelectModeBar", menuArray, [0,4], "wide")
})

ID("gotoJoin").addEventListener("click", e => {
joinType.style.display = "none"
joinGameMenu.style.display = "";
})



ID("joinGameButton").addEventListener("click", e => {
	join(e)
});

function join(event) {
	const roomCode = ID("joinGameCode").value
	const name = ID("joinGameUsername").value
	if (roomCode == '' || name == '' || status.get() == 'disconnected') return
	joinGame({room: roomCode, name: name})

}


ID("createRoomButton").addEventListener("click", e => {
	create(e)
	picker.destroy("createGameSelectColorBar")
});

function create(event) {
	const name = ID("createGameUsername").value
	const mines = ID("createGameOptionsMines").value
	const width = ID("createGameOptionsWidth").value
	const height = ID("createGameOptionsHeight").value
	if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
	const options = {
		mines: mines,
		width: width,
		height: height
	}
	const data =
	{
		name: name,
		options: options
	}
	console.log(data)
	createGame(data)

}