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 * as util from "/scripts/util.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("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 create(event) {
	const name = ID("createGameUsername").value
	const mines = ID("createGameOptionsMines").value
	const width = widthBox.value;
	const height = heightBox.value;
  const color = colorPicker.selected
	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
	}
	console.log(data)
	createGame(data)

}