import { resolveRouteParameters } from "./resolve-route-parameters.js";
import { restoreWorkspaceState } from "./restore-workspace-state.js";
import { useModalSidebar } from "../hooks/use-modal-sidebar.js";
import Modal_default from "../Modal.vue.js";
import { computed, createApp, reactive, ref, watch } from "vue";
import { useModal } from "@scalar/components";
import { createWorkspaceEventBus } from "@scalar/workspace-store/events";
//#region src/v2/features/modal/helpers/create-api-client-modal.ts
/**
* Creates the API Client Modal.
*
* The modal does not require a router. Instead, navigation is handled by setting
* active entities directly through the returned `route` function.
*/
var createApiClientModal = ({ el, eventBus = createWorkspaceEventBus({ debug: false }), mountOnInitialize = true, plugins = [], workspaceStore, options = {} }) => {
	const requestBodyCompositionSelection = ref({});
	const defaultEntities = {
		path: "default",
		method: "default",
		example: "default",
		documentSlug: workspaceStore.workspace["x-scalar-active-document"] || "default"
	};
	const workspaceStoreSnapshot = ref(null);
	const parameters = reactive({ ...defaultEntities });
	/** Navigate to the specified path, method, and example. */
	const route = (payload) => {
		Object.assign(parameters, defaultEntities, payload);
	};
	/** Resolved parameters from the workspace store. */
	const resolvedParameters = computed(() => resolveRouteParameters(workspaceStore, parameters));
	const documentSlug = computed(() => resolvedParameters.value.documentSlug);
	const path = computed(() => resolvedParameters.value.path);
	const method = computed(() => resolvedParameters.value.method);
	const exampleName = computed(() => resolvedParameters.value.example);
	/** The document from the workspace store. */
	const document = computed(() => workspaceStore.workspace.documents[documentSlug.value ?? ""] ?? null);
	/** Sidebar state and selection handling. */
	const sidebarState = useModalSidebar({
		workspaceStore,
		documentSlug,
		path,
		method,
		exampleName,
		route
	});
	const modalState = useModal();
	const app = createApp(Modal_default, {
		document,
		eventBus,
		exampleName,
		method,
		modalState,
		path,
		plugins,
		requestBodyCompositionSelection,
		sidebarState,
		workspaceStore,
		options
	});
	/** Snapshot the workspace store when the modal is opened. */
	const handleModalOpen = () => {
		workspaceStoreSnapshot.value = window.structuredClone(workspaceStore.exportWorkspace());
	};
	/** Restore the workspace store when the modal is closed. */
	const handleModalClose = () => {
		requestBodyCompositionSelection.value = {};
		if (!workspaceStoreSnapshot.value) {
			console.warn("No workspace store snapshot to restore");
			return;
		}
		const result = restoreWorkspaceState({
			workspaceStore,
			workspaceState: workspaceStoreSnapshot.value,
			name: documentSlug.value ?? ""
		});
		if (!result.ok) console.error("Failed to restore workspace state", result.error);
	};
	watch(() => modalState.open, (open) => open ? handleModalOpen() : handleModalClose());
	app.config.idPrefix = "scalar-client";
	/** Mount the modal to a given element. */
	const mount = (mountingEl = el) => {
		if (!mountingEl) {
			console.error("[@scalar/api-client] Could not create the API client Modal.", "Invalid HTML element provided.", "Read more: https://github.com/scalar/scalar/tree/main/packages/api-client");
			return;
		}
		app.mount(mountingEl);
	};
	if (mountOnInitialize) mount();
	return {
		app,
		open: (payload) => {
			modalState.open = true;
			if (payload) route(payload);
		},
		mount,
		route,
		modalState
	};
};
//#endregion
export { createApiClientModal };

//# sourceMappingURL=create-api-client-modal.js.map