import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton, ScalarTeleport } from "@scalar/components";
import { ScalarIconPlus } from "@scalar/icons";
import { onClickOutside } from "@vueuse/core";
import Fuse from "fuse.js";
//#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "gap-1/2 flex flex-col"
};
var _hoisted_2 = ["onClick"];
var _hoisted_3 = { class: "flex items-center gap-2 whitespace-nowrap" };
var _hoisted_4 = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" };
var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentVariablesDropdown",
	props: {
		query: {},
		environment: {},
		dropdownPosition: {}
	},
	emits: ["select", "redirect"],
	setup(__props, { expose: __expose, emit: __emit }) {
		const emit = __emit;
		const isOpen = ref(true);
		const dropdownRef = ref(null);
		const selectedVariableIndex = ref(0);
		const redirectToEnvironment = () => {
			emit("redirect");
			isOpen.value = false;
		};
		/** Normalize the variables to have a name and value */
		const normalizedVariables = computed(() => __props.environment.variables.map((v) => ({
			key: v.name,
			value: typeof v.value === "string" ? v.value : v.value.default
		})));
		const fuse = new Fuse(normalizedVariables.value, { keys: ["key", "value"] });
		const filteredVariables = computed(() => {
			if (!__props.query)
 /** return the last 4 environment variables on first display */
			return normalizedVariables.value.slice(-4).filter(({ key, value }) => key !== "" || value !== "");
			/** filter environment variables by name */
			const result = fuse.search(__props.query, { limit: 10 });
			if (result.length > 0) return result.map((res) => res.item).filter(({ key, value }) => key !== "" || value !== "");
			return [];
		});
		const selectVariable = (variableKey) => {
			emit("select", variableKey);
		};
		const handleArrowKey = (direction) => {
			const offset = direction === "up" ? -1 : 1;
			const length = filteredVariables.value.length;
			if (length === 0) return;
			selectedVariableIndex.value = (selectedVariableIndex.value + offset + length) % length;
		};
		const handleSelect = () => {
			if (selectedVariableIndex.value >= 0) {
				const selectedVariable = filteredVariables.value[selectedVariableIndex.value];
				if (selectedVariable) selectVariable(selectedVariable.key);
			}
		};
		__expose({
			handleArrowKey,
			handleSelect
		});
		onMounted(() => {
			selectedVariableIndex.value = 0;
		});
		const dropdownStyle = computed(() => {
			return {
				left: (__props.dropdownPosition?.left ?? 0) + "px",
				top: (__props.dropdownPosition?.top ?? 0) + 5 + "px"
			};
		});
		onClickOutside(dropdownRef, () => {
			isOpen.value = false;
		}, { ignore: [dropdownRef] });
		return (_ctx, _cache) => {
			return isOpen.value ? (openBlock(), createBlock(unref(ScalarTeleport), {
				key: 0,
				class: "scalar-client"
			}, {
				default: withCtx(() => [createElementVNode("div", {
					ref_key: "dropdownRef",
					ref: dropdownRef,
					class: "custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75",
					style: normalizeStyle(dropdownStyle.value)
				}, [filteredVariables.value.length ? (openBlock(), createElementBlock("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredVariables.value, (item, index) => {
					return openBlock(), createElementBlock("li", {
						key: item.key,
						class: normalizeClass(["font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150", { "bg-b-2": index === selectedVariableIndex.value }]),
						onClick: ($event) => selectVariable(item.key)
					}, [createElementVNode("div", _hoisted_3, [createElementVNode("span", {
						class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
						style: normalizeStyle({ backgroundColor: __props.environment.color })
					}, null, 4), createTextVNode(" " + toDisplayString(item.key), 1)]), createElementVNode("span", _hoisted_4, toDisplayString(item.value), 1)], 10, _hoisted_2);
				}), 128))])) : (openBlock(), createBlock(unref(ScalarButton), {
					key: 1,
					class: "font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
					variant: "outlined",
					onClick: redirectToEnvironment
				}, {
					default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), _cache[0] || (_cache[0] = createTextVNode(" Add Variable ", -1))]),
					_: 1
				})), _cache[1] || (_cache[1] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))], 4)]),
				_: 1
			})) : createCommentVNode("", true);
		};
	}
});
//#endregion
export { EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=EnvironmentVariablesDropdown.vue.script.js.map