import { getEnvColor } from "../../libs/env-helpers.js";
import { parseEnvVariables } from "../../libs/environment-parser.js";
import { createApp, defineComponent, h } from "vue";
import { ScalarTooltip } from "@scalar/components";
import { REGEX } from "@scalar/oas-utils/helpers";
import { ScalarIconGlobe } from "@scalar/icons";
import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
import { nanoid } from "nanoid";
//#region src/components/CodeInput/codeVariableWidget.ts
/**
* Displays the value of a variable of the active environment in a pill
*/
var PillWidget = class PillWidget extends WidgetType {
	app;
	uid;
	environment;
	envVariables;
	isReadOnly;
	constructor(variableName, environment, envVariables, isReadOnly) {
		super();
		this.variableName = variableName;
		this.variableName = variableName;
		this.environment = environment;
		this.envVariables = envVariables;
		this.isReadOnly = isReadOnly ?? false;
		this.uid = nanoid();
	}
	toDOM() {
		const span = document.createElement("span");
		span.className = "cm-pill";
		span.textContent = `${this.variableName}`;
		this.app = createApp(defineComponent({
			props: { variableName: {
				type: String,
				default: null
			} },
			render: () => {
				const val = this.envVariables ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName) : void 0;
				const isGlobal = val?.source === "global";
				const pillColor = isGlobal ? "var(--scalar-color-1)" : val && this.environment && this.environment.name !== "No Environment" ? getEnvColor(this.environment) : "var(--scalar-color-1)";
				span.style.setProperty("--tw-bg-base", pillColor);
				span.style.opacity = val?.value ? "1" : "0.5";
				const tooltipContent = val?.value || "No value";
				const tooltipTrigger = h("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [(isGlobal || this.environment?.name === "No Environment" && val?.value) && h(ScalarIconGlobe, {
					class: "size-3 -ml-1",
					icon: "Globe"
				}), h("span", this.variableName)]);
				return h(ScalarTooltip, {
					content: tooltipContent,
					delay: 0,
					placement: "bottom",
					offset: 6
				}, { default: () => tooltipTrigger });
			}
		}), { variableName: this.variableName });
		this.app.mount(span);
		return span;
	}
	destroy() {
		if (this.app) this.app.unmount();
	}
	eq(other) {
		return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid;
	}
	ignoreEvent() {
		return false;
	}
};
/**
* Styles the active environment variable pill
*/
var pillPlugin = (props) => ViewPlugin.fromClass(class {
	decorations;
	constructor(view) {
		this.decorations = this.buildDecorations(view);
	}
	update(update) {
		if (update.docChanged || update.viewportChanged) requestAnimationFrame(() => {
			this.decorations = this.buildDecorations(update.view);
			update.view.update([]);
		});
	}
	buildDecorations(view) {
		const builder = new RangeSetBuilder();
		for (const { from, to } of view.visibleRanges) {
			const text = view.state.doc.sliceString(from, to);
			let match;
			while ((match = REGEX.VARIABLES.exec(text)) !== null) {
				const start = from + match.index;
				const end = start + match[0].length;
				const variableName = match[1] ?? "";
				builder.add(start, end, Decoration.widget({
					widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),
					side: 1
				}));
			}
		}
		return builder.finish();
	}
}, { decorations: (v) => v.decorations });
var backspaceCommand = EditorView.domEventHandlers({ keydown(event, view) {
	if (event.key === "Backspace") {
		const { state } = view;
		const { from, to } = state.selection.main;
		if (from === 0 && to === state.doc.length) {
			view.dispatch({
				changes: {
					from: 0,
					to: state.doc.length
				},
				selection: { anchor: 0 }
			});
			event.preventDefault();
			return true;
		}
		if (from === to && from > 0) {
			if (state.doc.sliceString(from - 2, from) === "}}") {
				view.dispatch({
					changes: {
						from: from - 2,
						to
					},
					selection: { anchor: from - 2 }
				});
				event.preventDefault();
				return true;
			}
		}
	}
	return false;
} });
//#endregion
export { backspaceCommand, pillPlugin };

//# sourceMappingURL=codeVariableWidget.js.map