import {et2_IDOMNode, et2_implements_registry} from "./et2_core_interfaces";
import {et2_arrayMgr} from "./et2_core_arrayMgr";
import {et2_attribute_registry, et2_registry, et2_widget} from "./et2_core_widget";
import {etemplate2} from "./etemplate2";
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
import {et2_cloneObject, et2_csvSplit} from "./et2_core_common";
// @ts-ignore
import {IegwAppLocal} from "../jsapi/egw_global";
import {ClassWithAttributes, ClassWithInterfaces} from "./et2_core_inheritance";
import {LitElement} from "@lion/core";

/**
 * This mixin will allow any LitElement to become an Et2Widget
 *
 * Usage:
 * @example
 * export class Et2Loading extends Et2Widget(BXLoading) { ... }
 * @example
 * export class Et2Button extends Et2InputWidget(Et2Widget(BXButton)) { ... }
 *
 * @see Mixin explanation https://lit.dev/docs/composition/mixins/
 */

type Constructor<T = {}> = new (...args: any[]) => T;
export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
{
	class Et2WidgetClass extends superClass implements et2_IDOMNode
	{

		/** et2_widget compatability **/
		protected _mgrs: et2_arrayMgr[] = [];
		protected _parent: Et2WidgetClass | et2_widget | null = null;
		private _inst: etemplate2 | null = null;
		private supportedWidgetClasses = [];

		/**
		 * Not actually required by et2_widget, but needed to keep track of non-webComponent children
		 */
		private _legacy_children: et2_widget[] = [];

		/**
		 * Properties
		 */
		private label: string = "";
		private statustext: string = "";


		/** WebComponent **/
		static get properties()
		{
			return {
				...super.properties,

				/**
				 * Tooltip which is shown for this element on hover
				 */
				statustext: {type: String},

				label: {type: String},
				onclick: {
					type: Function,
					converter: (value) =>
					{
						debugger;
						return et2_compileLegacyJS(value, this, this);
					}
				}
			};
		}

		/**
		 * Widget Mixin constructor
		 *
		 * Note the ...args parameter and super() call
		 *
		 * @param args
		 */
		constructor(...args: any[])
		{
			super(...args);
		}

		connectedCallback()
		{
			super.connectedCallback();

			this.set_label(this.label);

			if (this.statustext)
			{
				this.egw().tooltipBind(this, this.statustext);
			}
		}

		disconnectedCallback()
		{
			this.egw().tooltipUnbind(this);
		}

		/**
		 * NOT the setter, since we cannot add to the DOM before connectedCallback()
		 *
		 * TODO: This is not best practice.  Should just set property, DOM modification should be done in render
		 * https://lit-element.polymer-project.org/guide/templates#design-a-performant-template
		 *
		 * @param value
		 */
		set_label(value)
		{
			let oldValue = this.label;

			// Remove old
			let oldLabels = this.getElementsByClassName("et2_label");
			while (oldLabels[0])
			{
				this.removeChild(oldLabels[0]);
			}

			this.label = value;
			if (value)
			{
				let label = document.createElement("span");
				label.classList.add("et2_label");
				label.textContent = this.label;
				// We should have a slot in the template for the label
				//label.slot="label";
				this.appendChild(label);
				this.requestUpdate('label', oldValue);
			}
		}

		/**
		 * Event handlers
		 */

		/**
		 * Click handler calling custom handler set via onclick attribute to this.onclick
		 *
		 * @param _ev
		 * @returns
		 */
		_handleClick(_ev: MouseEvent): boolean
		{
			if (typeof this.onclick == 'function')
			{
				// Make sure function gets a reference to the widget, splice it in as 2. argument if not
				var args = Array.prototype.slice.call(arguments);
				if (args.indexOf(this) == -1) args.splice(1, 0, this);

				return this.onclick.apply(this, args);
			}

			return true;
		}

		/** et2_widget compatability **/
		destroy()
		{
			// Not really needed, use the disconnectedCallback() and let the browser handle it
		}

		isInTree(): boolean
		{
			// TODO: Probably should watch the state or something
			return true;
		}

		/**
		 * Loads the widget tree from an XML node
		 *
		 * @param _node xml node
		 */
		loadFromXML(_node)
		{
			// Load the child nodes.
			for (var i = 0; i < _node.childNodes.length; i++)
			{
				var node = _node.childNodes[i];
				var widgetType = node.nodeName.toLowerCase();

				if (widgetType == "#comment")
				{
					continue;
				}

				if (widgetType == "#text")
				{
					if (node.data.replace(/^\s+|\s+$/g, ''))
					{
						this.innerText = node.data;
					}
					continue;
				}

				// Create the new element
				this.createElementFromNode(node);
			}
		}

		/**
		 * Create a et2_widget from an XML node.
		 *
		 * First the type and attributes are read from the node.  Then the readonly & modifications
		 * arrays are checked for changes specific to the loaded data.  Then the appropriate
		 * constructor is called.  After the constructor returns, the widget has a chance to
		 * further initialize itself from the XML node when the widget's loadFromXML() method
		 * is called with the node.
		 *
		 * @param _node XML node to read
		 * @param _name XML node name
		 *
		 * @return et2_widget
		 */
		createElementFromNode(_node, _name?)
		{
			var attributes = {};
			debugger;
			// Parse the "readonly" and "type" flag for this element here, as they
			// determine which constructor is used
			var _nodeName = attributes["type"] = _node.getAttribute("type") ?
												 _node.getAttribute("type") : _node.nodeName.toLowerCase();
			var readonly = attributes["readonly"] = this.getArrayMgr("readonlys") ?
													(<any>this.getArrayMgr("readonlys")).isReadOnly(
														_node.getAttribute("id"), _node.getAttribute("readonly"),
														typeof this.readonly !== "undefined" ? this.readonly : false) : false;

			// Check to see if modifications change type
			var modifications = this.getArrayMgr("modifications");
			if (modifications && _node.getAttribute("id"))
			{
				let entry: any = modifications.getEntry(_node.getAttribute("id"));
				if (entry == null)
				{
					// Try again, but skip the fancy stuff
					// TODO: Figure out why the getEntry() call doesn't always work
					entry = modifications.data[_node.getAttribute("id")];
					if (entry)
					{
						this.egw().debug("warn", "getEntry(" + _node.getAttribute("id") + ") failed, but the data is there.", modifications, entry);
					}
					else
					{
						// Try the root, in case a namespace got missed
						entry = modifications.getRoot().getEntry(_node.getAttribute("id"));
					}
				}
				if (entry && entry.type && typeof entry.type === 'string')
				{
					_nodeName = attributes["type"] = entry.type;
				}
				entry = null;
			}

			// if _nodeName / type-attribute contains something to expand (eg. type="@${row}[type]"),
			// we need to expand it now as it defines the constructor and by that attributes parsed via parseXMLAttrs!
			if (_nodeName.charAt(0) == '@' || _nodeName.indexOf('$') >= 0)
			{
				_nodeName = attributes["type"] = this.getArrayMgr('content').expandName(_nodeName);
			}

			let widget = null;
			if (undefined == window.customElements.get(_nodeName))
			{
				// Get the constructor - if the widget is readonly, use the special "_ro"
				// constructor if it is available
				var constructor = et2_registry[typeof et2_registry[_nodeName] == "undefined" ? 'placeholder' : _nodeName];
				if (readonly === true && typeof et2_registry[_nodeName + "_ro"] != "undefined")
				{
					constructor = et2_registry[_nodeName + "_ro"];
				}

				// Parse the attributes from the given XML attributes object
				this.parseXMLAttrs(_node.attributes, attributes, constructor.prototype);

				// Do an sanity check for the attributes
				ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);

				// Creates the new widget, passes this widget as an instance and
				// passes the widgetType. Then it goes on loading the XML for it.
				widget = new constructor(this, attributes);

				// Load the widget itself from XML
				widget.loadFromXML(_node);
			}
			else
			{
				widget = this.loadWebComponent(_nodeName, _node);

				if (this.addChild)
				{
					// webcomponent going into old et2_widget
					this.addChild(widget);
				}
			}
			return widget;
		}

		/**
		 * Load a Web Component
		 * @param _nodeName
		 * @param _node
		 */
		loadWebComponent(_nodeName: string, _node): HTMLElement
		{
			let widget = <Et2WidgetClass>document.createElement(_nodeName);
			widget.textContent = _node.textContent;

			const widget_class = window.customElements.get(_nodeName);
			if (!widget_class)
			{
				throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class");
			}
			widget.setParent(this);
			var mgr = widget.getArrayMgr("content");
			debugger;
			// Apply any set attributes - widget will do its own coercion
			_node.getAttributeNames().forEach(attribute =>
			{
				let attrValue = _node.getAttribute(attribute);

				// If there is not attribute set, ignore it.  Widget sets its own default.
				if (typeof attrValue === "undefined") return;

				// If the attribute is marked as boolean, parse the
				// expression as bool expression.
				if (widget_class.getPropertyOptions(attribute).type == "Boolean")
				{
					attrValue = mgr.parseBoolExpression(attrValue);
				}
				else
				{
					attrValue = mgr.expandName(attrValue);
				}
				widget.setAttribute(attribute, attrValue);
			});

			if (widget_class.getPropertyOptions("value") && widget.set_value)
			{
				if (mgr != null)
				{
					let val = mgr.getEntry(widget.id, false, true);
					if (val !== null)
					{
						widget.set_value(val);
					}
				}
			}

			// Children need to be loaded
			widget.loadFromXML(_node);

			return widget;
		}

		/**
		 * The parseXMLAttrs function takes an XML DOM attributes object
		 * and adds the given attributes to the _target associative array. This
		 * function also parses the legacyOptions.
		 *
		 * @param _attrsObj is the XML DOM attributes object
		 * @param {object} _target is the object to which the attributes should be written.
		 * @param {et2_widget} _proto prototype with attributes and legacyOptions attribute
		 */
		parseXMLAttrs(_attrsObj, _target, _proto)
		{
			// Check whether the attributes object is really existing, if not abort
			if (typeof _attrsObj == "undefined")
			{
				return;
			}

			// Iterate over the given attributes and parse them
			var mgr = this.getArrayMgr("content");
			for (var i = 0; i < _attrsObj.length; i++)
			{
				var attrName = _attrsObj[i].name;
				var attrValue = _attrsObj[i].value;

				// Special handling for the legacy options
				if (attrName == "options" && _proto.constructor.legacyOptions && _proto.constructor.legacyOptions.length > 0)
				{
					let legacy = _proto.constructor.legacyOptions || [];
					let attrs = et2_attribute_registry[Object.getPrototypeOf(_proto).constructor.name] || {};
					// Check for modifications on legacy options here.  Normal modifications
					// are handled in widget constructor, but it's too late for legacy options then
					if (_target.id && this.getArrayMgr("modifications").getEntry(_target.id))
					{
						var mod: any = this.getArrayMgr("modifications").getEntry(_target.id);
						if (typeof mod.options != "undefined") attrValue = _attrsObj[i].value = mod.options;
					}
					// expand legacyOptions with content
					if (attrValue.charAt(0) == '@' || attrValue.indexOf('$') != -1)
					{
						attrValue = mgr.expandName(attrValue);
					}

					// Parse the legacy options (as a string, other types not allowed)
					var splitted = et2_csvSplit(attrValue + "");

					for (var j = 0; j < splitted.length && j < legacy.length; j++)
					{
						// Blank = not set, unless there's more legacy options provided after
						if (splitted[j].trim().length === 0 && legacy.length >= splitted.length) continue;

						// Check to make sure we don't overwrite a current option with a legacy option
						if (typeof _target[legacy[j]] === "undefined")
						{
							attrValue = splitted[j];

							/**
						If more legacy options than expected, stuff them all in the last legacy option
						Some legacy options take a comma separated list.
							 */
							if (j == legacy.length - 1 && splitted.length > legacy.length)
							{
								attrValue = splitted.slice(j);
							}

							var attr = et2_attribute_registry[_proto.constructor.name][legacy[j]] || {};

							// If the attribute is marked as boolean, parse the
							// expression as bool expression.
							if (attr.type == "boolean")
							{
								attrValue = mgr.parseBoolExpression(attrValue);
							}
							else if (typeof attrValue != "object")
							{
								attrValue = mgr.expandName(attrValue);
							}
							_target[legacy[j]] = attrValue;
						}
					}
				}
				else if (attrName == "readonly" && typeof _target[attrName] != "undefined")
				{
					// do NOT overwrite already evaluated readonly attribute
				}
				else
				{
					let attrs = et2_attribute_registry[_proto.constructor.name] || {};
					if (mgr != null && typeof attrs[attrName] != "undefined")
					{
						var attr = attrs[attrName];

						// If the attribute is marked as boolean, parse the
						// expression as bool expression.
						if (attr.type == "boolean")
						{
							attrValue = mgr.parseBoolExpression(attrValue);
						}
						else
						{
							attrValue = mgr.expandName(attrValue);
						}
					}

					// Set the attribute
					_target[attrName] = attrValue;
				}
			}
		}

		iterateOver(_callback: Function, _context, _type)
		{
			if (et2_implements_registry[_type] && et2_implements_registry[_type](this))
			{
				_callback.call(_context, this);
			}
			// TODO: children
		}

		/**
		 * Needed for legacy compatability.
		 *
		 * @param {Promise[]} promises List of promises from widgets that are not done.  Pass an empty array, it will be filled if needed.
		 */
		loadingFinished(promises)
		{
			/**
			 * This is needed mostly as a bridge between non-WebComponent widgets and
			 * connectedCallback().  It's not really needed if the whole tree is WebComponent.
			 * WebComponents can be added as children immediately after creation, and they handle the
			 * rest themselves with their normal lifecycle (especially connectedCallback(), which is kind
			 * of the equivalent of doLoadingFinished()
			 */
			if (this.getParent() instanceof et2_widget)
			{
				this.getParent().getDOMNode(this).append(this);
			}

			for (let i = 0; i < this._legacy_children.length; i++)
			{
				let child = this._legacy_children[i];
				let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
				if (child_node && child_node !== this)
				{
					this.append(child_node);
				}
				child.loadingFinished(promises);
			}
		}

		getWidgetById(_id)
		{
			if (this.id == _id)
			{
				return this;
			}
		}

		setParent(new_parent: Et2WidgetClass | et2_widget)
		{
			this._parent = new_parent;

			if (this.id)
			{
				// Create a namespace for this object
				if (this._createNamespace())
				{
					this.checkCreateNamespace();
				}
			}

		}

		getParent(): HTMLElement | et2_widget
		{
			let parentNode = this.parentNode;

			// If parent is an old et2_widget, use it
			if (this._parent)
			{
				return this._parent;
			}

			return <HTMLElement>parentNode;
		}

		addChild(child: et2_widget | Et2WidgetClass)
		{
			if (child instanceof et2_widget)
			{
				child._parent = this;

				// During legacy widget creation, the child's DOM node won't be available yet.
				this._legacy_children.push(child);
				let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
				if (child_node && child_node !== this)
				{
					this.append(child_node);
				}
			}
			else
			{
				this.append(child);
			}
		}

		/**
		 * Get [legacy] children
		 * Use <obj>.children to get web component children
		 * @returns {et2_widget[]}
		 */
		getChildren()
		{
			return this._legacy_children;
		}

		getType(): string
		{
			return this.nodeName;
		}

		getDOMNode(): HTMLElement
		{
			return this;
		}

		/**
		 * Sets the array manager for the given part
		 *
		 * @param {string} _part which array mgr to set
		 * @param {object} _mgr
		 */
		setArrayMgr(_part: string, _mgr: et2_arrayMgr)
		{
			this._mgrs[_part] = _mgr;
		}

		/**
		 * Returns the array manager object for the given part
		 *
		 * @param {string} managed_array_type name of array mgr to return
		 */
		getArrayMgr(managed_array_type: string): et2_arrayMgr | null
		{
			if (this._mgrs && typeof this._mgrs[managed_array_type] != "undefined")
			{
				return this._mgrs[managed_array_type];
			}
			else if (this.getParent())
			{
				return this.getParent().getArrayMgr(managed_array_type);
			}

			return null;
		}

		/**
		 * Sets all array manager objects - this function can be used to set the
		 * root array managers of the container object.
		 *
		 * @param {object} _mgrs
		 */
		setArrayMgrs(_mgrs)
		{
			this._mgrs = <et2_arrayMgr[]>et2_cloneObject(_mgrs);
		}

		/**
		 * Returns an associative array containing the top-most array managers.
		 *
		 * @param _mgrs is used internally and should not be supplied.
		 */
		getArrayMgrs(_mgrs?: object)
		{
			if (typeof _mgrs == "undefined")
			{
				_mgrs = {};
			}

			// Add all managers of this object to the result, if they have not already
			// been set in the result
			for (var key in this._mgrs)
			{
				if (typeof _mgrs[key] == "undefined")
				{
					_mgrs[key] = this._mgrs[key];
				}
			}

			// Recursively applies this function to the parent widget
			if (this._parent)
			{
				this._parent.getArrayMgrs(_mgrs);
			}

			return _mgrs;
		}

		/**
		 * Checks whether a namespace exists for this element in the content array.
		 * If yes, an own perspective of the content array is created. If not, the
		 * parent content manager is used.
		 *
		 * Constructor attributes are passed in case a child needs to make decisions
		 */
		checkCreateNamespace()
		{
			// Get the content manager
			var mgrs = this.getArrayMgrs();

			for (var key in mgrs)
			{
				var mgr = mgrs[key];

				// Get the original content manager if we have already created a
				// perspective for this node
				if (typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this)
				{
					mgr = mgr.parentMgr;
				}

				// Check whether the manager has a namespace for the id of this object
				var entry = mgr.getEntry(this.id);
				if (typeof entry === 'object' && entry !== null || this.id)
				{
					// The content manager has an own node for this object, so
					// create an own perspective.
					this._mgrs[key] = mgr.openPerspective(this, this.id);
				}
				else
				{
					// The current content manager does not have an own namespace for
					// this element, so use the content manager of the parent.
					delete (this._mgrs[key]);
				}
			}
		}

		/**
		 * Returns the instance manager
		 *
		 * @return {etemplate2}
		 */
		getInstanceManager()
		{
			if (this._inst != null)
			{
				return this._inst;
			}
			else if (this.getParent())
			{
				return this.getParent().getInstanceManager();
			}

			return null;
		}

		/**
		 * Returns the path into the data array.  By default, array manager takes care of
		 * this, but some extensions need to override this
		 */
		getPath()
		{
			var path = this.getArrayMgr("content").getPath();

			// Prevent namespaced widgets with value from going an extra layer deep
			if (this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();

			return path;
		}

		_createNamespace(): boolean
		{
			return false;
		}

		egw(): IegwAppLocal
		{
			if (this.getParent() != null && !(this.getParent() instanceof HTMLElement))
			{
				return (<et2_widget>this.getParent()).egw();
			}

			// Get the window this object belongs to
			var wnd = null;
			// @ts-ignore Technically this doesn't have implements(), but it's mixed in
			if (this.implements(et2_IDOMNode))
			{
				var node = (<et2_IDOMNode><unknown>this).getDOMNode();
				if (node && node.ownerDocument)
				{
					wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
				}
			}

			// If we're the root object, return the phpgwapi API instance
			return egw('phpgwapi', wnd);
		}
	};

	function applyMixins(derivedCtor: any, baseCtors: any[])
	{
		baseCtors.forEach(baseCtor =>
		{
			Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
			{
				if (name !== 'constructor')
				{
					derivedCtor.prototype[name] = baseCtor.prototype[name];
				}
			});
		});
	}

	// Add some more stuff in
	applyMixins(Et2WidgetClass, [ClassWithInterfaces]);

	return Et2WidgetClass as unknown as Constructor<et2_IDOMNode> & T;
}