class Tooltip extends View {
	/**
	 * Creates and returns a new generic tooltip with the given HTML content.
	 */
	static createTooltip(text = "") {
		var tooltipElement = document.createElement("TOOLTIP");
		var tooltip = new Tooltip(tooltipElement);
		tooltip.setText(text);

		return tooltip;
	}

	/**
	 * The constructor accepts a DOM element as a parameter. This is the content view of the popover.
	 */
	constructor(element = null) {
		super(element);

		//The delay in seconds that is awaited before auto-hiding the tooltip.
		this.hideDelay = 2;

		this.contentElement = document.createElement("DIV");
		this.contentElement.className = "tooltip-content";
		while (this.element.children.length > 0) {
			this.contentElement.appendChild(this.element.firstChild);
		}

		this.element.appendChild(this.contentElement);

		this.arrowElement = document.createElement("DIV");
		this.arrowElement.className = "tooltip-arrow-container";

		this.arrowBoxElement = document.createElement("DIV");
		this.arrowBoxElement.className = "tooltip-arrow-box";

		this.arrowTipElement = document.createElement("DIV");
		this.arrowTipElement.className = "tooltip-arrow-tip";

		this.arrowBoxElement.appendChild(this.arrowTipElement);
		this.arrowElement.appendChild(this.arrowBoxElement);
		this.element.appendChild(this.arrowElement);
	}

	/**
	 * The build function is called in the constructor when no element was passed as the base.
	 * Override it to create custom subviews or manipulate the root element.
	 * Don't forget to return the element in the end!
	 */
	build(element) {
		return element;
	}

	/**
	 * Called once the view has been processed by UIKit during the view controller initialization.
	 */
	viewDidLoad() { }

	/**
	 * Called everytime before the view is shown.
	 * The layout is already done at this step, so it's safe to use scrollWidth and scrollHeight and what not.
	 */
	viewWillAppear() { }

	/**
	 * Called everytime after the view is shown.
	 */
	viewDidAppear() { }

	/**
	 * Called everytime before the view is hidden.
	 */
	viewWillDisappear() { }

	/**
	 * Called everytime after the view is hidden.
	 */
	viewDidDisappear() { }

	/**
	 * Updates the content of this tooltip.
	 */
	setText(text) {
		this.contentElement.innerHTML = "<span>" + text + "</span>";

		if (this.pointingElement) {
			this.pointAtElement(this.pointingElement, this.side);
		}
		else if (this.pointingPosition) {
			this.pointToPosition(this.pointingPosition.x, this.pointingPosition.y, this.side);
		}
	}

	/**
	 * Shows the tooltip for the specified element.
	 * Will automatically position the tooltip to be located next to the element on screen.
	 * You can optionally specify the side of the element on which the tooltip should appear.
	 */
	showForElement(element, side = "right") {
		this.prepareForShowing();

		this.pointAtElement(element, side);

		this.completeShowing();
	}

	/**
	 * Shows the tooltip pointing to the given position on the specified side or "right" if no side was specified.
	 */
	showForPosition(x, y, side = "right") {
		this.prepareForShowing();

		this.pointToPosition(x, y, side);

		this.completeShowing();
	}

	/**
	 * Shows the tooltip at the cursor position.
	 */
	showForCursor(side = "right") {
		this.prepareForShowing();

		this.pointToCursor(side);

		this.completeShowing();
	}

	prepareForShowing() {
		this.element.classList.add("preparing");
		if (this.hidingTimeout) {
			clearTimeout(this.hidingTimeout);
			this.hidingTimeout = null;
		}
		if (this.endDismissingTimeout) {
			clearTimeout(this.endDismissingTimeout);
			this.endDismissingTimeout = null;
			this.endDismissing();
		}
		UIKit.activeScene.showTooltip(this);
	}

	completeShowing() {
		this.element.classList.remove("preparing");
		this.visible = true;

		if (this.autohide) {
			this.hidingTimeout = setTimeout(this.dismiss.bind(this), this.hideDelay * 1000);
		}
	}

	/**
	 * Makes the tooltip point at the given element.
	 */
	pointAtElement(element, side = "right") {
		this.pointingElement = element;

		var elementBounds = element.getBoundingClientRect();
		var tooltipBounds = this.element.getBoundingClientRect();

		//Calculate the absolute center position of the element on the screen.
		var elementCenterX = elementBounds.left + (elementBounds.width / 2);
		var elementCenterY = elementBounds.top + (elementBounds.height / 2);

		var tooltipLeft = elementCenterX - (tooltipBounds.width / 2);
		var tooltipTop = elementCenterY - (tooltipBounds.height / 2);

		if (tooltipTop < Popover.POPOVER_SCREEN_PADDING) {
			tooltipTop = Popover.POPOVER_SCREEN_PADDING;
		}
		else if (tooltipTop + tooltipBounds.height > window.innerHeight - Popover.POPOVER_SCREEN_PADDING) {
			tooltipTop = window.innerHeight - Popover.POPOVER_SCREEN_PADDING - tooltipBounds.height;
		}

		if (tooltipLeft < Popover.POPOVER_SCREEN_PADDING) {
			elementCenterX = Popover.POPOVER_SCREEN_PADDING + (elementBounds.width / 2);
		}
		else if (tooltipLeft + tooltipBounds.width > window.innerWidth - Popover.POPOVER_SCREEN_PADDING) {
			elementCenterX = window.innerWidth - Popover.POPOVER_SCREEN_PADDING - (elementBounds.width / 2);
		}

		//Evaluate the target position based on the side.
		var targetPosition = { x: 0, y: 0 };
		if (side == "right") {
			targetPosition = { x: elementBounds.left + elementBounds.width, y: elementCenterY };
		}
		else if (side == "left") {
			targetPosition = { x: elementBounds.left, y: elementCenterY };
		}
		else if (side == "top") {
			targetPosition = { x: elementCenterX, y: elementBounds.top };
		}
		else if (side == "bottom") {
			targetPosition = { x: elementCenterX, y: elementBounds.top + elementBounds.height };
		}

		this.pointToPosition(targetPosition.x, targetPosition.y, side);
	}

	/**
	 * Makes the tooltip point at a position on screen.
	 */
	pointToPosition(x, y, side = "right") {
		this.pointingPosition = { x, y };
		this.side = side;

		var tooltipBounds = this.element.getBoundingClientRect();

		var targetPosition = { x: 0, y: 0 };

		if (side == "right") {
			targetPosition = { x: x + Popover.POPOVER_ARROW_SIZE, y: y - (tooltipBounds.height / 2) };
		}
		else if (side == "left") {
			targetPosition = { x: x - tooltipBounds.width - Popover.POPOVER_ARROW_SIZE, y: y - (tooltipBounds.height / 2) };
		}
		else if (side == "top") {
			targetPosition = { x: x - (tooltipBounds.width / 2), y: y - tooltipBounds.height - Popover.POPOVER_ARROW_SIZE };
		}
		else if (side == "bottom") {
			targetPosition = { x: x - (tooltipBounds.width / 2), y: y + Popover.POPOVER_ARROW_SIZE };
		}

		this.element.style.left = targetPosition.x + "px";
		this.element.style.top = targetPosition.y + "px";

		this.element.className = side;
	}

	pointToCursor(side = "right") {
		this.pointToPosition(UIKit.mousePosition.x, UIKit.mousePosition.y, side);
	}

	/**
	 * Dismisses the tooltip.
	 */
	dismiss() {
		this.element.classList.add("dismissing");
		this.visible = false;
		this.endDismissingTimeout = setTimeout(this.endDismissing.bind(this), 810);
	}

	endDismissing() {
		UIKit.activeScene.dismissTooltip();
		this.element.className = "";
	}
}

UIKit.registerTooltipType(Tooltip, "tooltip");