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

var menuPicker, colorPicker;




export function init(){
  colorPicker = new Picker("createGameSelectColorBar", tileArray, [8, 16], null, 0, null)
  menuPicker = new Picker ("createGameSelectModeBar", menuArray, [0,4], "wide", 0, updateMenu)
  changeMode()
}









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

const mineSlider = ID("createGameOptionsMinePercent")
const mineBox = ID("createGameOptionsMines")
const mineSliderNumber = ID("createGameOptionsMinePercentIndicator")
const widthBox = ID("createGameOptionsWidth")
const heightBox = ID("createGameOptionsHeight")


mineSlider.oninput = function() {
	updateCount(0)
	menuPicker.select(3)
}

mineBox.addEventListener("change", function() {
updateCount(1)
menuPicker.select(3)
})

heightBox.addEventListener("change", function(){
	updateCount(2)
	menuPicker.select(3)
})

widthBox.addEventListener("change", function(){
  updateCount(2)
	menuPicker.select(3)
})

var mines = 5;
var mode = 0;

function updateMenu(){
	mode = menuPicker.selected
	changeMode(menuPicker.selected)
}

function changeMode() {
  var width = widthBox.value;
  var height = heightBox.value;
	switch (mode) {
		case 0:
			width = 9;
			height = 9;
			mines = 10;
			break;
		case 1:
			width = 16;
			height = 16;
			mines = 40
			break;
		case 2:
			width = 30
			height = 16
			mines = 99;
			break;
	}
  widthBox.value = width;
  heightBox.value = height;
	updateCount(2)
}


function updateCount(mode) {
	let percentage;
  const width = widthBox.value
  const height = heightBox.value

	const max = maxMines(width, height)
	const min = minMines(width, height)
	if (mode === 0) {
			mines = Math.ceil((mineSlider.value/10) * (width*height) /100)
			updateCount(2)
		}
	 else if (mode === 1) {
			mineBox.value = Math.abs(Math.round(mineBox.value))
			mines = mineBox.value;
			updateCount(2)
		}

		else if (mode === 2) {

			if (mines > max) {
				mines = max
			}
			if (mines < min) {
				mines = min
			}
			percentage = Math.floor((mines / (width * height)) * 1000)/ 10
			mineBox.value = mines;
			mineSlider.value = percentage * 10
			updatePercentageLabel(percentage)
		}


}


function maxMines(width, height) {
	return width * height - 10
}

function minMines(width, height) {
	return (width * height) / 10
}

function updatePercentageLabel(percentage) {
			mineSliderNumber.textContent = `${percentage}%`
}


function create(event) {
	const name = ID("createGameUsername").value
	const mines = ID("createGameOptionsMines").value
	const width = widthBox.value;
	const height = heightBox.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)

}