import { MediaElement } from "../media-element.js";
import { alertDialogContext } from "./context.js";
import { applyElementProps, applyStateDataAttrs, createAlertDialog, createTransition } from "@videojs/core/dom";
import { ContextProvider } from "@videojs/element/context";
import { SnapshotController } from "@videojs/store/html";
import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";

//#region src/ui/alert-dialog/alert-dialog-element.ts
let idCounter = 0;
var AlertDialogElement = class extends MediaElement {
	static {
		this.tagName = "media-alert-dialog";
	}
	static {
		this.properties = { open: { type: Boolean } };
	}
	#core = new AlertDialogCore();
	#provider = new ContextProvider(this, { context: alertDialogContext });
	#titleId = `vjs-alert-dialog-title-${idCounter++}`;
	#descriptionId = `vjs-alert-dialog-desc-${idCounter++}`;
	#dialog = null;
	#snapshot = null;
	constructor() {
		super();
		this.open = false;
		this.#core.setTitleId(this.#titleId);
		this.#core.setDescriptionId(this.#descriptionId);
	}
	connectedCallback() {
		super.connectedCallback();
		this.#dialog = createAlertDialog({
			transition: createTransition(),
			onOpenChange: (nextOpen) => {
				this.open = nextOpen;
				this.dispatchEvent(new CustomEvent("open-change", { detail: { open: nextOpen } }));
			}
		});
		this.#dialog.setElement(this);
		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.#dialog?.destroy();
		this.#dialog = null;
	}
	willUpdate(changed) {
		super.willUpdate(changed);
		if (this.#dialog && changed.has("open")) {
			const { active: inputOpen } = this.#dialog.input.current;
			if (this.open !== inputOpen) if (this.open) this.#dialog.open();
			else this.#dialog.close();
		}
	}
	update(_changed) {
		super.update(_changed);
		if (!this.#dialog) return;
		const input = this.#dialog.input.current;
		this.#core.setInput(input);
		const state = this.#core.getState();
		applyElementProps(this, this.#core.getAttrs(state));
		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
		this.#provider.setValue({
			state,
			stateAttrMap: AlertDialogDataAttrs,
			close: () => this.#dialog?.close()
		});
	}
};

//#endregion
export { AlertDialogElement };
//# sourceMappingURL=alert-dialog-element.js.map