/**
 * The script that looks like module to CMS
 */

class CMSHookup {
    _moduleUri;

    constructor(moduleUri) {

        this._moduleUri = moduleUri.toLowerCase();

        //create a iframe to hold the module
        this.iframe = document.createElement('iframe');
        this.iframe.style.position = "absolute";
        this.iframe.style.left = "-9999px";
        document.body.appendChild(this.iframe);


    }

    async setup() {
        const scripts = [
            "polyfills.js",
            "main.js"
        ];

        //get version from server
        const rootUrl = this._moduleUri
        const ver = "0";
        const scriptsFinal = scripts
            .map(s => `${s}?${ver}`)
            .join(";");

        this.iframe.src = `CMS/ExternalModule?root=app-root`
            + `&url=${encodeURIComponent(this._moduleUri)}`
            + `&scripts=${encodeURIComponent(scriptsFinal)}`;
    }

    createScriptElement(src) {
        const scriptEle = document.createElement("script");
        scriptEle.setAttribute("src", src);
        scriptEle.setAttribute("type", "module");

        this.iframe.contentWindow.document.body.appendChild(scriptEle);
    }
}

//create hookup instance when body finished loading
document.body.onload = async () => {
    let url = document.getElementById("TestModule")?.getAttribute("src") || "";

    let pos = url.indexOf("/hookup/");
    if (pos > -1) {
        url = url.substring(0, pos);
    }

    window.modules_CMSHookup = new CMSHookup(url);
    await window.modules_CMSHookup.setup();
}

const ngref = topWindow.NG_REF as CMSAppComponent;
                if (!ngref)
                return;

export class AppComponent {
	observableSubTeardowns = [];

	constructor() {
		const ngref = window.top['NG_REF']
		
		this.observableSubTeardowns.push(ngref.componentInitialized.subscribe(evt => {
			//get the whole edit form model
			const allElesData = (window.top as any).NG_REF.editFormDataService.serializedModel;

			if (!allElesData)
				return; //no edit form yet, skip

			//create button for edit form index fields
			this.createButtonOnField(evt, allElesData);
		}));

		this.observableSubTeardowns.push(ngref.componentDestroyed.subscribe(comp => {
			if (comp.constructor.name === "StructuralField") {
				//remove the button from the field upon it being destroyed
				evt.component.theButton?.parentElement?.removeChild(theButton);
				delete evt.component.theButton;
			}
		}));
	}
	
	private _mutationObserver;
	
	private createButtonOnField(evt: ViewInitModel, allElesData: any) {
		if (evt.component.constructor.name === "StructuralField") {
			//if text or html field, create an button next to the eraser button
			if ((evt.component as any).isText() || (evt.component as any).isHtml()) {
				const fieldNode = (evt.component as any).theButtonElement.nativeElement;
				const toolbarNode = fieldNode?.querySelector(".titleBarButtons");
				const eraserButtonNode = toolbarNode?.querySelector(".igx-fa-eraser");

				if (!!eraserButtonNode) {
					//create a node before the eraser button
					theButton = document.createElement("button");
					theButton.innerHTML = "The Button";
					theButton.disabled = true;
					
					//TODO: hook up event on the button to do something...

					toolbarNode.insertBefore(theButton, eraserButtonNode);

					//add classes after component created, since the host attribute will override the classes
					theButton.classList.add("igx-fa");
					theButton.classList.add("hidden");
					theButton.style.marginRight = "6px";

					this._mutationObserver = new MutationObserver((mutations) => {
						mutations.forEach((mutation) => {
							if (mutation.type === "attributes" && mutation.attributeName === "class") {
								const eraserButton = mutation.target as HTMLElement;
								if (eraserButton.classList.contains("hidden")) {
									theButton.classList.add("hidden");
								} else {
									theButton.classList.remove("hidden");
								}
							}
						});
					});

					//only enable the button when the details are created
					const sub = (evt.component as any).detailsCreated
						.subscribe(() => {
							sub.unsubscribe();
							if ((evt.component as any).isHtml())
								this.delay(1000); //wait for tinymce to complete building

							theButton.disabled = false;
						});

					//add the prop on the edit form field
					evt.component.theButton = theButton;
				}
			}
		}
	}	
}