import * as net from "../../net/netcode.js"
import {Picker} from "./picker.js"
import {tileArray, menuArray} from "../../display/tileRenderer.js"
import * as util from "../../util.js"
import {ID} from "../../util.js"
import * as status from "../../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 => {
	createGameClick(e)
});

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("input", function() {
  mineBox.value = Math.abs(Math.round(mineBox.value.replace(/\D/g,'')))
})

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

heightBox.addEventListener("input", function(){
  heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
	updateCount(2)

})

heightBox.addEventListener("change", function(){
  heightBox.value = util.clamp(heightBox.value, 8, 500)
  updateCount(2)
  menuPicker.select(3)
})

widthBox.addEventListener("input", function(){
  widthBox.value = Math.abs(Math.round(widthBox.value.replace(/\D/g,'')))
  updateCount(2)

})

widthBox.addEventListener("change", function(){
  widthBox.value = util.clamp(widthBox.value, 8, 500)
  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.round((mineSlider.value/10) * (width*height) /100)

			updateCount(2)
		}
   else if (mode === 1) {
		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 Math.floor((width * height) / 10)
}

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


function createGameClick(event) {
	const name = ID("createGameUsername").value
	const width = Number(widthBox.value);
	const height = Number(heightBox.value);
  const color = Number(colorPicker.selected + 1);
	if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
	const options = { mines: mines, width: width, height: height};
	const data = {name: name, color: color, options: options};
	net.createGame(data)

}