import { createApp, defineComponent, h } from "vue";
import { ScalarTooltip } from "@scalar/components";
import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
import { REGEX } from "@scalar/helpers/regex/regex-helpers";
//#region src/v2/components/code-input/code-variable-widget.ts
/**
* Displays the value of a variable of the active environment in a pill.
* Uses Vue for tooltip functionality.
*/
var PillWidget = class PillWidget extends WidgetType {
	app;
	pillColor;
	variableInfo;
	constructor(variableName, environment) {
		super();
		this.variableName = variableName;
		this.pillColor = environment?.color || "var(--scalar-color-1)";
		const variable = environment?.variables?.find((v) => v.name === variableName);
		const value = variable ? typeof variable.value === "string" ? variable.value : variable.value?.default : void 0;
		this.variableInfo = {
			value: value || "No value",
			hasValue: Boolean(value)
		};
	}
	toDOM() {
		const span = document.createElement("span");
		span.className = "cm-pill";
		span.textContent = this.variableName;
		span.style.setProperty("--tw-bg-base", this.pillColor);
		span.style.opacity = this.variableInfo.hasValue ? "1" : "0.5";
		this.app = createApp(defineComponent({ render: () => {
			const tooltipTrigger = h("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [h("span", this.variableName)]);
			return h(ScalarTooltip, {
				content: this.variableInfo.value,
				delay: 0,
				placement: "bottom",
				offset: 6
			}, { default: () => tooltipTrigger });
		} }));
		this.app.mount(span);
		return span;
	}
	destroy() {
		if (this.app) {
			this.app.unmount();
			this.app = null;
		}
	}
	eq(other) {
		return other instanceof PillWidget && other.variableName === this.variableName && other.pillColor === this.pillColor && other.variableInfo.value === this.variableInfo.value && other.variableInfo.hasValue === this.variableInfo.hasValue;
	}
	ignoreEvent() {
		return false;
	}
};
/**
* Styles the active environment variable pill.
* This plugin creates decorations for environment variables in the editor.
*/
var pillPlugin = (props) => ViewPlugin.fromClass(class {
	decorations;
	lastEnvironment;
	constructor(view) {
		this.lastEnvironment = props.environment;
		this.decorations = this.buildDecorations(view);
	}
	update(update) {
		if (props.environment !== this.lastEnvironment) {
			this.lastEnvironment = props.environment;
			this.decorations = this.buildDecorations(update.view);
			return;
		}
		if (update.docChanged || update.viewportChanged) this.decorations = this.buildDecorations(update.view);
	}
	buildDecorations(view) {
		const builder = new RangeSetBuilder();
		for (const { from, to } of view.visibleRanges) {
			const text = view.state.doc.sliceString(from, to);
			const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags);
			let match;
			while ((match = regex.exec(text)) !== null) {
				const start = from + match.index;
				const end = start + match[0].length;
				const variableName = match[1] ?? "";
				if (view.state.doc.sliceString(start, end).includes("\n")) continue;
				builder.add(start, end, Decoration.widget({
					widget: new PillWidget(variableName, props.environment),
					side: 1
				}));
			}
		}
		return builder.finish();
	}
}, { decorations: (v) => v.decorations });
/**
* Custom backspace handler for the editor.
* Handles special cases like removing entire variable syntax and clearing all content.
*/
var backspaceCommand = EditorView.domEventHandlers({ keydown(event, view) {
	if (event.key !== "Backspace") return false;
	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 >= 2) {
		if (state.doc.sliceString(from - 2, from) === "}}") {
			view.dispatch({
				changes: {
					from: from - 2,
					to: from
				},
				selection: { anchor: from - 2 }
			});
			event.preventDefault();
			return true;
		}
	}
	return false;
} });
//#endregion
export { backspaceCommand, pillPlugin };

//# sourceMappingURL=code-variable-widget.js.map