/**
 * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact Volker Schukai.
 */

import { instanceSymbol } from "../../constants.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
import { CustomElement } from "../../dom/customelement.mjs";
import {
	assembleMethodSymbol,
	registerCustomElement,
} from "../../dom/customelement.mjs";
import { findTargetElementFromEvent } from "../../dom/events.mjs";
import { isFunction } from "../../types/is.mjs";
import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
import { IframeStyleSheet } from "./stylesheet/iframe.mjs";
import { fireCustomEvent } from "../../dom/events.mjs";

export { Iframe };

/**
 * @private
 * @type {symbol}
 */
export const iframeElementSymbol = Symbol("iframeElement");

/**
 * @private
 * @type {symbol}
 */
const PanelElementSymbol = Symbol("PanelElement");

/**
 * local symbol
 * @private
 * @type {symbol}
 */
const resizeObserverSymbol = Symbol("resizeObserver");

/**
 * @private
 * @type {symbol}
 */
const timerCallbackSymbol = Symbol("timerCallback");

/**
 * A Iframe Control
 *
 * @fragments /fragments/components/layout/iframe/
 *
 * @example /examples/components/layout/iframe-simple Simple iframe
 * @example /examples/components/layout/iframe-with-toolbar Iframe With Toolbar
 *
 * @since 3.76.0
 * @copyright Volker Schukai
 * @summary An iframe wrapper for embedded tools, remote documents and external content inside Monster layouts.
 */
class Iframe extends CustomElement {
	/**
	 * This method is called by the `instanceof` operator.
	 * @return {symbol}
	 */
	static get [instanceSymbol]() {
		return Symbol.for("@schukai/monster/components/layout/iframe@@instance");
	}

	/**
	 *
	 * @return {Components.Layout.Iframe
	 * @fires monster-iframe-clicked
	 */
	[assembleMethodSymbol]() {
		super[assembleMethodSymbol]();
		initControlReferences.call(this);
		initEventHandler.call(this);
		calcHeight.call(this);
		return this;
	}

	/**
	 * This method is called by the dom and should not be called directly.
	 *
	 * @return {void}
	 */
	connectedCallback() {
		super.connectedCallback();
		attachResizeObserver.call(this);

		// disable scrolling in parent node
		if (this.parentNode && this.parentNode instanceof HTMLElement) {
			this.parentNode.style.overflow = "hidden";
		}
	}

	/**
	 * This method is called by the dom and should not be called directly.
	 *
	 * @return {void}
	 */
	disconnectedCallback() {
		super.disconnectedCallback();
		disconnectResizeObserver.call(this);
	}

	/**
	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
	 *
	 * The individual configuration values can be found in the table.
	 *
	 * @property {Object} templates Template definitions
	 * @property {string} templates.main Main template
	 * @property {Object} labels Label definitions
	 * @property {Object} actions Callbacks
	 * @property {string} actions.click="throw Error" Callback when clicked
	 * @property {Object} features Features
	 * @property {boolean} features.allowFullScreen=true Allow fullscreen
	 * @property {boolean} features.allowPaymentRequest=true Allow payment request
	 * @property {boolean} features.replaceTargets=true Replace parent target in iframe
	 * @property {string} loading="eager" Loading state
	 * @property {string} referrerPolicy="no-referrer" Referrer policy
	 * @property {string} src Source
	 * @property {Object} classes CSS classes
	 * @property {boolean} disabled=false Disabled state
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
			src: null,

			/* "allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"*/
			sandbox: null,

			labels: {},
			classes: {},

			name: "",

			referrerPolicy: "no-referrer",

			disabled: false,
			features: {
				allowFullScreen: true,
				allowPaymentRequest: true,
				replaceTargets: true,
			},

			loading: "eager",

			actions: {
				click: () => {},
			},
		});
	}

	/**
	 * @return {string}
	 */
	static getTag() {
		return "monster-iframe";
	}

	/**
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		return [IframeStyleSheet];
	}
}

/**
 * @private
 */
function calcHeight() {
	this.style.boxSizing = "border-box";

	const height = calculateMaximumHeight.call(this, this.parentNode);
	if (height < 0 || isNaN(height)) {
		return;
	}

	this[iframeElementSymbol].style.height = `${height}px`;
}

/**
 * Calculate the maximum height of an element based on the window's inner height
 * @param element
 * @return {*}
 */
function calculateMaximumHeight(element) {
	let totalBottomBorder = 0;
	let totalBottomPadding = 0;
	let totalBottomMargin = 0;
	let totalOutlineHeight = 0;
	let totalBoxShadowHeight = 0;
	let currentElement = element;

	while (currentElement && currentElement !== document.body) {
		const style = window.getComputedStyle(currentElement);
		const boxSizing = style.boxSizing;

		const elementHeight = currentElement.getBoundingClientRect().height;

		const borderBottomWidth = parseFloat(style.borderBottomWidth);
		const paddingBottom = parseFloat(style.paddingBottom);
		const marginBottom = parseFloat(style.marginBottom);

		const outlineHeight = parseFloat(style.outlineWidth);

		totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
		totalBottomPadding +=
			isNaN(paddingBottom) || boxSizing === "border-box" ? 0 : paddingBottom;
		totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
		totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;

		const boxShadow = style.boxShadow;
		let boxShadowVerticalTotal = 0;

		if (boxShadow !== "none") {
			const boxShadowValues = boxShadow.split(" ");
			const verticalOffset = parseFloat(boxShadowValues[3]);
			const blurRadius = parseFloat(boxShadowValues[4]);
			const spreadRadius = parseFloat(boxShadowValues[5]);

			boxShadowVerticalTotal = verticalOffset + blurRadius + spreadRadius;
		}

		totalBoxShadowHeight += isNaN(boxShadowVerticalTotal)
			? 0
			: boxShadowVerticalTotal;

		if (elementHeight > 200) {
			return (
				elementHeight -
				totalBottomBorder -
				totalBottomPadding -
				totalBottomMargin -
				totalOutlineHeight -
				totalBoxShadowHeight
			);
		}

		currentElement = currentElement.parentNode || currentElement.host;
	}
}

/**
 * @private
 */
function attachResizeObserver() {
	// against flickering
	this[resizeObserverSymbol] = new ResizeObserver(() => {
		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
			try {
				this[timerCallbackSymbol].touch();
				return;
			} catch (e) {
				delete this[timerCallbackSymbol];
			}
		}

		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
			calcHeight.call(this);
		});
	});

	this[resizeObserverSymbol].observe(this.ownerDocument.body);
	this[resizeObserverSymbol].observe(document.scrollingElement);
}

function disconnectResizeObserver() {
	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
		this[resizeObserverSymbol].disconnect();
	}
}

/**
 * @private
 * @return {initEventHandler}
 */
function initEventHandler() {
	const self = this;
	const element = this[iframeElementSymbol];

	const type = "click";

	element.addEventListener(type, function (event) {
		const callback = self.getOption("actions.click");

		fireCustomEvent(self, "monster-iframe-clicked", {
			element: self,
		});

		if (!isFunction(callback)) {
			return;
		}

		const element = findTargetElementFromEvent(
			event,
			ATTRIBUTE_ROLE,
			"control",
		);

		if (!(element instanceof Node && self.hasNode(element))) {
			return;
		}

		callback.call(self, event);
	});

	this[iframeElementSymbol].addEventListener("load", () => {
		calcHeight.call(this);
		if (this.getOption("features.replaceTargets")) {
			const links = this[iframeElementSymbol].contentDocument.querySelectorAll(
				'a[target="_parent"], form[target="_parent"], a[target="_top"], form[target="_top"]',
			);
			links.forEach(function (link) {
				link.target = "_self";
			});
		}
	});

	return this;
}

/**
 * @private
 * @return {void}
 */
function initControlReferences() {
	if (!this.shadowRoot) {
		throw new Error("no shadow-root is defined");
	}

	this[PanelElementSymbol] = this.shadowRoot.querySelector(
		"[data-monster-role=control]",
	);

	this[iframeElementSymbol] = this.shadowRoot.querySelector(
		`[${ATTRIBUTE_ROLE}="control"] iframe`,
	);
}

/**
 * @private
 * @return {string}
 */
function getTemplate() {
	// language=HTML
	return `
        <div data-monster-role="control" part="control">
            <iframe data-monster-role="iframe"
                    data-monster-attributes="sandbox path:sandbox,
					name path:name,
					referrerpolicy path:referrerPolicy,
					loading path:loading,
					allowpaymentrequest path:features.allowPaymentRequest,
					allowfullscreen path:features.allowFullScreen, 
					src path:src"
            ></iframe>
        </div>`;
}

registerCustomElement(Iframe);
