window.intellexAuthWindow = null;
const IntellexAuthentication = {

	/** @var {NodeListOf<Element>} The list of all elements to attach the Intellex authentication mechanism. */
	elements: document.querySelectorAll("[data-intellex-auth]"),

	/**
	 * Create the overlay for the parent window.
	 *
	 * @return {Element} The overlay to place at the end of the body of the parent window.
	 */
	overlay: function () {
		"use strict";

		// Prepare the overlay
		const overlay = document.createElement("div");
		overlay.id = "IntellexAuthOverlay";
		overlay.style = "width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,16,19, .75);";

		// Set the contents
		overlay.innerHTML = "" +
			"<style>" +
			"	#IntellexAuthOverlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,16,19, .75); }" +
			"	#IntellexAuthOverlay .intellex-auth-caption { width: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #ffffff; font-family: Arial, sans-serif; text-align: center; }" +
			"	#IntellexAuthOverlay .intellex-auth-caption img { width: 45px; display: inline-block; margin: 0 0 10px 0; }" +
			"	#IntellexAuthOverlay .intellex-auth-caption p { font-size: 16px; margin: 0; padding:0 0 5px 0;  }" +
			"	#IntellexAuthOverlay .intellex-auth-caption a { font-size: 14px; color: #ffffff; text-decoration: none; font-weight: bold; text-transform: uppercase; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }" +
			"	#IntellexAuthOverlay .intellex-auth-caption a:hover { color: #a2c539; }" +
			"	#IntellexAuthOverlay a.intellex-auth-show { width: 100%; height: 100%; display: block; }" +
			"	#IntellexAuthOverlay a.intellex-auth-hide { box-sizing: content-box; width: 24px; height: 24px; display: block; position: absolute; padding: 30px; top: 0; right: 0; cursor: pointer; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }" +
			"	#IntellexAuthOverlay a.intellex-auth-hide:after { width: 24px; height: 3px; background: #ffffff; position: absolute; right:30px; top:40px; transform: rotate(-45deg); content: \"\"; cursor: pointer; }" +
			"	#IntellexAuthOverlay a.intellex-auth-hide:before { width: 24px; height: 3px; background: #ffffff; position: absolute; right:30px; top:40px; transform: rotate(45deg); content: \"\"; cursor: pointer; }" +
			"	#IntellexAuthOverlay a.intellex-auth-hide:hover { background: rgba(255, 0, 0, 0.33); }" +
			"</style>" +
			"<a href=\"javascript: IntellexAuthentication.hide()\" class=\"intellex-auth-hide\"></a>" +
			"<a href=\"javascript: IntellexAuthentication.show()\" class=\"intellex-auth-show\">" +
			"	<div class=\"intellex-auth-caption\">" +
			"		<img src=\"" + window.intellexAuthDomain + "/theme/intellex-logo.svg\" alt />" +
			"		<p>Intellex Authentication in progress</p>" +
			"	</div>" +
			"</a>";

		return overlay;
	},

	/**
	 * Initialize.
	 */
	init: function () {
		"use strict";

		// Attach onClick listeners to all elements
		for (const i in this.elements) {
			if (this.elements.hasOwnProperty(i)) {

				// Show login
				this.elements[i].onclick = function () {
					IntellexAuthentication.show(this);
				};
			}
		}

		// Handle actions
		window.addEventListener("message", function (event) {
			IntellexAuthentication.handleMessage(event.data?.action, event.data?.payload ?? {});
		});
	},

	/**
	 * Handle a message from the popup.
	 *
	 * @param {string|null} action The action id.
	 * @param {{}} payload The optional payload for the action.
	 */
	handleMessage: function (action, payload) {
		"use strict";

		switch (action) {
			case "redirect":
				window.location.href = payload.href;
				break;
		}
	},

	/**
	 * Make sure to clean up when window is forcefully closed.
	 */
	cleanOnWindowClose: function () {
		"use strict";

		if (!window.intellexAuthWindow || window.intellexAuthWindow.closed) {
			IntellexAuthentication.hide();
		} else {
			setTimeout(IntellexAuthentication.cleanOnWindowClose, 1000);
		}
	},

	/**
	 * Hide the login popup.
	 */
	hide: function () {
		"use strict";

		// Close popup
		if (window.intellexAuthWindow && !window.intellexAuthWindow.closed) {
			window.intellexAuthWindow.close();
			window.intellexAuthWindow = null;
		}

		// Hide overlay
		if (document.getElementById("IntellexAuthOverlay")) {
			document.body.removeChild(document.getElementById("IntellexAuthOverlay"));
		}
	},

	/**
	 * Show the login popup.
	 *
	 * @param {Element} element The DOM element that triggered the action.
	 */
	show: function (element) {
		"use strict";

		// Show existing
		if (window.intellexAuthWindow && !window.intellexAuthWindow.closed) {
			window.intellexAuthWindow.focus();

			// Create a new one
		} else if (element) {
			this.create(element.dataset.intellexAuth);
		}

		// Show the overlay on the parent
		if (!document.getElementById("IntellexAuthOverlay")) {
			document.body.appendChild(this.overlay());
		}
	},

	/**
	 * Create the login popup.
	 *
	 * @param {string} redirect The redirection URL for successful login.
	 */
	create: function (redirect) {
		"use strict";

		// Get the target
		if (!window.intellexAuthDomain) {
			window.intellexAuthDomain = "https://auth.intellex.rs";
		}

		// Set the window dimension
		const width = 350;
		const height = 535;

		// Center on screen, handle dual screen as well
		const left = (window.screenLeft !== undefined ? window.screenLeft : window.screen.left) + (window.screen.availWidth - width) / 2;
		const top = (window.screenTop !== undefined ? window.screenTop : window.screen.top) + (window.screen.availHeight - height) / 2;

		// Set the parameters
		const parameters = {
			"directories": false,
			"titlebar"   : false,
			"location"   : false,
			"toolbar"    : false,
			"status"     : false,
			"menubar"    : false,
			"scrollbars" : false,
			"resizable"  : false,
			"left"       : left,
			"top"        : top,
			"width"      : width,
			"height"     : height
		};

		// Create a chain
		const parameterChain = [];
		for (const key in parameters) {
			if (parameters.hasOwnProperty(key)) {
				let value = parameters[key];

				// Special values
				if (value === false || value === true) {
					value = value ? "yes" : "no";
				}

				parameterChain.push(key + "=" + value);
			}
		}

		// Create a new one
		window.intellexAuthWindow = window.open(
			window.intellexAuthDomain + "/form/login/?redirect=" + encodeURIComponent(redirect),
			"Intellex Authentication",
			parameterChain.join(",")
		);

		// Clear overlay if window closed
		this.cleanOnWindowClose();
	}
};

// Initialize
IntellexAuthentication.init();