require('TemplateLoader');

class Dialog {
	constructor() {
		this.leftDialog = null;
		this.rightDialog = null;
		this.lastMessage = "right";
	}

	async attach(parent) {
		this.leftDialog = document.createElement('div');
		this.leftDialog.id = 'dialog-container-left';
		this.leftDialog.className = "animate-visibility";
		this.leftDialog.addEventListener('click', (event) => this.advance(event));

		document.body.appendChild(this.leftDialog);

		this.rightDialog = document.createElement('div');
		this.rightDialog.id = 'dialog-container-right';
		this.rightDialog.className = "animate-visibility";
		this.rightDialog.addEventListener('click', (event) => this.advance(event));

		document.body.appendChild(this.rightDialog);
	}

	draw(context, delta) {
	}

	advance(event) {
		switch (this.lastMessage) {
			case "left":
				this.clickRightDialog();
				this.lastMessage = "right";
				break;
			case "right":
				this.clickLeftDialog();
				this.lastMessage = "left";
				break;
		}
	}

	clickLeftDialog(event) {
		if (this.leftDialog.childNodes.length > 0) {
			this.leftDialog.removeChild(this.leftDialog.childNodes[0]);
			return true;
		}
		return false;
	}

	clickRightDialog(event) {
		if (this.rightDialog.childNodes.length > 0) {
			this.rightDialog.removeChild(this.rightDialog.childNodes[0]);
			return true;
		}
		return false;
	}

	leftSay(message, className) {
		let messageSpan = document.createElement("span");
		messageSpan.className = "message";
		if (className) {
			messageSpan.className += " " + className;
		}
		messageSpan.innerHTML = message;

		this.leftDialog.appendChild(messageSpan);

		let containerHeight = this.leftDialog.offsetHeight;
		let childrenHeight = 0;
		for (let i = 0; i < this.leftDialog.childNodes.length; i++) {
			childrenHeight += this.leftDialog.childNodes[i].offsetHeight;
		}
		if (childrenHeight >= containerHeight) {
			this.leftDialog.removeChild(this.leftDialog.childNodes[0]);
		}

		messageSpan.style.opacity = 1;
		this.lastMessage = "left";
	}

	rightSay(message, className) {

		let messageSpan = document.createElement("span");
		messageSpan.className = "message";
		if (className) {
			messageSpan.className += " " + className;
		}
		messageSpan.innerHTML = message;

		this.rightDialog.appendChild(messageSpan);

		let containerHeight = this.rightDialog.offsetHeight;
		let childrenHeight = 0;
		for (let i = 0; i < this.rightDialog.childNodes.length; i++) {
			childrenHeight += this.rightDialog.childNodes[i].offsetHeight;
		}
		if (childrenHeight >= containerHeight) {
			this.rightDialog.removeChild(this.rightDialog.childNodes[0]);
		}

		messageSpan.style.opacity = 1;
		this.lastMessage = "right";
	}

	leftClear() {
		this.leftDialog.innerHTML = "";
	}

	rightClear() {
		this.rightDialog.innerHTML = "";
	}
}