import "@gradio/theme/reset.css";
import "@gradio/theme/global.css";
import "@gradio/theme/pollen.css";
import "@gradio/theme/typography.css";
import "@gradio/theme/gradio-style.scss";
//@ts-ignore
// import * as svelte from "./svelte/svelte.js";
import { Client } from "@gradio/client";
import type Index from "./Index.svelte";
import type { ThemeMode } from "@gradio/core";
import { mount, unmount } from "svelte";
declare let BUILD_MODE: string;
declare let GRADIO_VERSION: string;

declare global {
	var __MODE__: "_NORMAL_" | "_CC_" | undefined;
}

const ENTRY_CSS = "__ENTRY_CSS__";

let FONTS: string | [];

FONTS = "__FONTS_CSS__";

let IndexComponent: typeof Index;
let mount_css: typeof import("@gradio/core").mount_css;
let _res: (value?: unknown) => void;
let pending = new Promise((res) => {
	_res = res;
});

globalThis.__MODE__ ??= "_NORMAL_";
const mode: "_NORMAL_" | "_CC_" = globalThis.__MODE__;

async function get_index(): Promise<void> {
	if (mode === "_CC_") {
		await import("virtual:cc-init");
	}
	const modules = await Promise.all([
		import("./Index.svelte"),
		import("@gradio/core")
	]);
	IndexComponent = modules[0].default;
	mount_css = modules[1].mount_css;
	_res();
}

function create_custom_element(): void {
	class GradioApp extends HTMLElement {
		control_page_title: string | null;
		initial_height: string;
		is_embed: string;
		container: string;
		info: string | true;
		autoscroll: string | null;
		eager: string | null;
		theme_mode: ThemeMode | null;
		host: string | null;
		space: string | null;
		src: string | null;
		app?: ReturnType<typeof mount>;
		loading: boolean;
		updating: { name: string; value: string } | false;
		constructor() {
			super();
			this.host = this.getAttribute("host");
			this.space = this.getAttribute("space");
			this.src = this.getAttribute("src");

			this.control_page_title = this.getAttribute("control_page_title");
			this.initial_height = this.getAttribute("initial_height") ?? "300px"; // default: 300px
			this.is_embed = this.getAttribute("embed") ?? "true"; // default: true
			this.container = this.getAttribute("container") ?? "true"; // default: true
			this.info = this.getAttribute("info") ?? true; // default: true
			this.autoscroll = this.getAttribute("autoscroll");
			this.eager = this.getAttribute("eager");
			this.theme_mode = this.getAttribute("theme_mode") as ThemeMode | null;
			this.updating = false;
			this.loading = false;
		}

		async connectedCallback(): Promise<void> {
			await get_index();
			this.loading = true;

			if (this.app) {
				unmount(this.app);
			}

			if (typeof FONTS !== "string") {
				FONTS.forEach((f) => mount_css(f, document.head));
			}

			await mount_css(ENTRY_CSS, document.head);

			const event = new CustomEvent("domchange", {
				bubbles: true,
				cancelable: false,
				composed: true
			});

			const observer = new MutationObserver((mutations) => {
				this.dispatchEvent(event);
			});

			observer.observe(this, { childList: true });

			const opts = {
				target: this,
				props: {
					// embed source
					space: this.space ? this.space.trim() : this.space,
					src: this.src ? this.src.trim() : this.src,
					// embed info
					info: this.info === "false" ? false : true,
					container: this.container === "false" ? false : true,
					is_embed: this.is_embed === "false" ? false : true,
					initial_height: this.initial_height,
					eager: this.eager === "true" ? true : false,
					// gradio meta info
					version: GRADIO_VERSION,
					theme_mode: this.theme_mode,
					// misc global behaviour
					autoscroll: this.autoscroll === "true" ? true : false,
					control_page_title: this.control_page_title === "true" ? true : false,
					// injectables
					Client,
					// for gradio docs
					// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
					app_mode: window.__gradio_mode__ === "app"
				}
			};

			this.app = mount(IndexComponent, opts);

			if (this.updating) {
				this.setAttribute(this.updating.name, this.updating.value);
			}

			this.loading = false;
		}

		static get observedAttributes(): ["src", "space", "host"] {
			return ["src", "space", "host"];
		}

		async attributeChangedCallback(
			name: string,
			old_val: string,
			new_val: string
		): Promise<void> {
			await pending;
			if (
				(name === "host" || name === "space" || name === "src") &&
				new_val !== old_val
			) {
				this.updating = { name, value: new_val };
				if (this.loading) return;

				if (this.app) {
					unmount(this.app);
				}

				this.space = null;
				this.host = null;
				this.src = null;

				if (name === "host") {
					this.host = new_val;
				} else if (name === "space") {
					this.space = new_val;
				} else if (name === "src") {
					this.src = new_val;
				}

				const opts = {
					target: this,
					props: {
						// embed source
						space: this.space ? this.space.trim() : this.space,
						src: this.src ? this.src.trim() : this.src,
						// embed info
						info: this.info === "false" ? false : true,
						container: this.container === "false" ? false : true,
						is_embed: this.is_embed === "false" ? false : true,
						initial_height: this.initial_height,
						eager: this.eager === "true" ? true : false,
						// gradio meta info
						version: GRADIO_VERSION,
						theme_mode: this.theme_mode,
						// misc global behaviour
						autoscroll: this.autoscroll === "true" ? true : false,
						control_page_title:
							this.control_page_title === "true" ? true : false,
						// injectables
						Client,
						// for gradio docs
						// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
						app_mode: window.__gradio_mode__ === "app"
					}
				};

				this.app = mount(IndexComponent, opts);

				this.updating = false;
			}
		}
	}
	if (!customElements.get("gradio-app"))
		customElements.define("gradio-app", GradioApp);
}

create_custom_element();