// Copyright Epic Games, Inc. All Rights Reserved.

"use strict";

////////////////////////////////////////////////////////////////////////////////
class ComponentBase
{
	constructor(element)
	{
		if (element instanceof ComponentBase)
			element = element._element;

		this._element = element;
	}

	inner()
	{
		return this._element;
	}

	parent()
	{
		const e = this._element.parentElement;
		return e ? this.new_component(e) : null;
	}

	first_child()
	{
		const e = this._element.firstElementChild;
		return e ? this.new_component(e) : null;
	}

	next_sibling()
	{
		const e = this._element.nextElementSibling;
		return e ? this.new_component(e) : null;
	}

	destroy()
	{
		this._element.parentNode.removeChild(this._element);
	}
}

////////////////////////////////////////////////////////////////////////////////
class ComponentDom extends ComponentBase
{
	is(tag)
	{
		return this._element.tagName == tag.toUpperCase();
	}

	tag(tag="div")
	{
		var element = document.createElement(tag);
		this._element.appendChild(element);
		return this.new_component(element);
	}

	retag(new_tag)
	{
		if (this._element.tagName == new_tag.toUpperCase())
			return this;

		var element = document.createElement(new_tag);
		element.innerHTML = this._element.innerHTML;
		this._element.parentNode.replaceChild(element, this._element);
		this._element = element;
		return this;
	}

	text(value)
	{
		value = (value == undefined) ? "undefined" : value.toString();
		this._element.innerHTML = (value != "") ? value : "";
		return this;
	}

	id(value)
	{
		this._element.id = value;
		return this;
	}

	classify(value)
	{
		this._element.classList.add(value);
		return this;
	}

	style(key, value)
	{
		this._element.style[key] = value;
		return this;
	}

	attr(key, value=undefined)
	{
		if (value === undefined)
			return this._element.getAttribute(key);
		else if (value === null)
			this._element.removeAttribute(key);
		else
			this._element.setAttribute(key, value);
		return this;
	}
}

////////////////////////////////////////////////////////////////////////////////
class ComponentInteract extends ComponentDom
{
	link(resource=undefined, query_params={})
	{
		if (resource != undefined)
		{
			var href = resource;
			var sep = "?";
			for (const key in query_params)
			{
				href += sep + key + "=" + query_params[key];
				sep = "&";
			}
		}
		else
			href = "javascript:void(0);";

		var text = this._element.innerHTML;
		this._element.innerHTML = "";
		this.tag("a").text(text).attr("href", href);
		return this;
	}

	on(what, func, ...args)
	{
		const thunk = (src) => {
			if (src.target != this._element)
				return;

			func(...args);
			src.stopPropagation();
		};

		this._element.addEventListener(what, thunk);
		return this;
	}

	on_click(func, ...args)
	{
		this.classify("zen_action");
		return this.on("click", func, ...args);
	}
}

////////////////////////////////////////////////////////////////////////////////
export class Component extends ComponentInteract
{
	new_component(...args)
	{
		return new Component(...args);
	}
}