Engine.TextInput = class
{
	constructor(name)
	{
		this.container = document.getElementById("gameContainer");
		this.container.style.position = "relative";
		this.input = document.createElement("input");
		//this.container.style.position = "relative";

		this.input.id = name;
		this.input.type = "text";

		this.fontFamily = "Verdana";
		this.fontSize = 12;
		this.width = 100;
		this.height = 14;
		this.x = 0;
		this.y = 0;

		this.input.addEventListener("keydown", (event) => this.keyDownEvent(event));
		this.input.addEventListener("input", (event) => this.inputEvent(event));
		this.onEnter = null;
		this.onEscape = null;
		this.onInput = null;

		//this.input.addEventListener("mousedown", (event) => this.mouseDownEvent(event));
	}

	setText(value)
	{
		if (value === undefined) value = "";
		this.input.value = value;
	}

	getText()
	{
		return this.input.value;
	}

	setFont(fontFamily, fontSize)
	{
		this.fontFamily = fontFamily;
		this.fontSize = fontSize;
		this.setStyle();
	}

	setSize(width, height)
	{
		this.width = width;
		this.height = height;
		this.setStyle();
	}

	setPosition(x, y)
	{
		this.x = x;
		this.y = y;
		this.setStyle();
	}

	keyDownEvent(event)
	{
		if (event.keyCode == 13 && this.onEnter != null) this.onEnter();
		else if (event.keyCode == 27 && this.onEscape != null) this.onEscape();
	}

	inputEvent(event)
	{
		if (this.onInput != null) this.onInput();
	}

	activate()
	{
		KeyboardManager.disable();
		window.addEventListener('resize', event => this.setStyle());

		this.setStyle();
	  	this.container.appendChild(this.input);
	  	this.input.focus();
	}

	deactivate()
	{
		KeyboardManager.enable();
		window.removeEventListener('resize', event => this.setStyle());

		if (this.container.contains(this.input))
		{
			//this.setText();
			this.container.removeChild(this.input);
		}
	}

	setStyle()
	{
		var containerRect = this.container.getBoundingClientRect();
		var left = this.x;// + containerRect.left + window.scrollX;
		var top = this.y;// + containerRect.top + window.scrollY;

		this.input.style = "position:absolute;"
						+ "background-color:transparent;"
				    	+ "color:white;"
						+ "padding:0px;"
						+ "margin:0px;"
						+ "outline:none;"
						+ "border:none;"
						+ "left:" + left + "px;"
						+ "top:" + top + "px;"
						+ "width:" + this.width + "px;"
						+ "height:" + this.height + "px;"
						+ "font-family:" + this.fontFamily + ";"
						+ "font-size:" + this.fontSize + "px;"
	}

	/*
	TODO ONEDAY
	mouseDownEvent(event)
	{
		if (event.x >= this.x && event.x < this.x + this.width && event.y >= this.y && event.y < this.y + this.height)
		{
			KeyboardManager.disable();
	  		this.input.focus();
		}
		else
		{
			KeyboardManager.enable();
		}
	}*/
}