import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeMount, onBeforeUnmount, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
import { useRouter } from "vue-router";
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
import { ScalarIconCaretLeft, ScalarIconMagnifyingGlass } from "@scalar/icons";
//#region src/v2/features/command-palette/TheCommandPalette.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5"
};
var _hoisted_2 = { class: "bg-b-2 focus-within:bg-b-1 sticky top-0 flex items-center rounded-md border border-transparent pl-2 shadow-[0_-8px_0_8px_var(--scalar-background-1),0_0_8px_8px_var(--scalar-background-1)] focus-within:border-(--scalar-background-3)" };
var _hoisted_3 = { for: "commandmenu" };
var _hoisted_4 = ["value", "onKeydown"];
var _hoisted_5 = ["id", "onClick"];
var _hoisted_6 = {
	key: 0,
	class: "text-c-3 p-2 pt-3 text-center text-sm"
};
var _hoisted_7 = {
	key: 1,
	class: "flex-1 p-1.5"
};
var TheCommandPalette_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "TheCommandPalette",
	props: {
		paletteState: {},
		workspaceStore: {},
		eventBus: {}
	},
	setup(__props) {
		/** Starting index when no search result is selected */
		const NO_SELECTION_INDEX = -1;
		const router = useRouter();
		const selectedSearchResult = ref(NO_SELECTION_INDEX);
		const commandInputRef = ref(null);
		/**
		* Flattens the filtered commands into a single array for keyboard navigation.
		* Makes it easier to track the selected index across all groups.
		*/
		const flattenedCommands = computed(() => __props.paletteState.filteredCommands.value.flatMap((group) => group.commands));
		/** The currently selected command based on keyboard navigation */
		const selectedCommand = computed(() => flattenedCommands.value[selectedSearchResult.value]);
		/**
		* Watch for search query changes and auto-select first result.
		* Resets selection when query is cleared.
		*/
		watch(() => __props.paletteState.filterQuery.value, (newQuery) => {
			selectedSearchResult.value = newQuery && flattenedCommands.value.length > 0 ? 0 : NO_SELECTION_INDEX;
		});
		/**
		* Handle input changes in the search field.
		* Updates the filter query and redirects to cURL import if detected.
		*/
		const handleInput = (value) => {
			__props.paletteState.setFilterQuery(value);
			if (value.trim().toLowerCase().startsWith("curl")) __props.paletteState.open("import-curl-command", { inputValue: value });
		};
		/**
		* Handle arrow key navigation in the command list.
		* Loops around to the beginning or end when reaching boundaries.
		*/
		const handleArrowKey = (direction, event) => {
			if (!__props.paletteState.isOpen.value) return;
			event.preventDefault();
			const offset = direction === "up" ? -1 : 1;
			const length = flattenedCommands.value.length;
			selectedSearchResult.value = (selectedSearchResult.value + offset + length) % length;
		};
		/**
		* Handle enter key to execute the selected command.
		* Only works when a command is selected and no active command is open.
		*/
		const handleSelect = (event) => {
			if (!selectedCommand.value || __props.paletteState.activeCommand.value) return;
			event.preventDefault();
			event.stopPropagation();
			handleCommandClick(selectedCommand.value);
		};
		/**
		* Handle command selection (via click or enter key).
		* Routes to navigation commands or opens folder commands.
		*/
		const handleCommandClick = (command) => {
			/** Navigate to route commands and close palette */
			if ("to" in command) {
				router.push(command.to);
				closeHandler();
				return;
			}
			__props.paletteState.open(command.id, {});
		};
		/**
		* Handle back navigation from active command.
		* Returns to the main command list and refocuses the search input.
		*/
		const handleBackEvent = () => {
			__props.paletteState.reset();
			nextTick(() => commandInputRef.value?.focus());
		};
		/** Handle close event from active command components */
		const handleCloseEvent = () => {
			__props.paletteState.close();
		};
		/**
		* Close the command palette and reset state.
		* Resets search results and closes the dialog.
		*/
		const closeHandler = () => {
			__props.paletteState.close();
			selectedSearchResult.value = NO_SELECTION_INDEX;
		};
		const paletteProps = computed(() => ({
			workspaceStore: __props.workspaceStore,
			eventBus: __props.eventBus,
			...__props.paletteState.activeCommandProps.value
		}));
		const onOpen = (payload) => {
			if (payload?.event) payload.event.preventDefault();
			if (payload && "action" in payload) __props.paletteState.open(payload.action, payload.payload);
			else __props.paletteState.open();
		};
		onBeforeMount(() => __props.eventBus.on("ui:open:command-palette", onOpen));
		onBeforeUnmount(() => __props.eventBus.off("ui:open:command-palette", onOpen));
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(Dialog), {
				open: __props.paletteState.isOpen.value,
				onClose: closeHandler
			}, {
				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("div", { class: "commandmenu-overlay z-overlay" }, null, -1)), createVNode(unref(DialogPanel), { class: "commandmenu z-overlay flex flex-col" }, {
					default: withCtx(() => [createVNode(unref(DialogTitle), { class: "sr-only" }, {
						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("API Client Command Menu", -1)])]),
						_: 1
					}), !__props.paletteState.activeCommand.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
						createElementVNode("div", _hoisted_2, [createElementVNode("label", _hoisted_3, [createVNode(unref(ScalarIconMagnifyingGlass), {
							class: "text-c-2 mr-2.5",
							size: "md",
							thickness: "1.5"
						})]), createElementVNode("input", {
							id: "commandmenu",
							ref_key: "commandInputRef",
							ref: commandInputRef,
							autocomplete: "off",
							autofocus: "",
							class: "w-full rounded border-none bg-none py-1.5 text-sm focus:outline-none",
							placeholder: "Search commands...",
							type: "text",
							value: __props.paletteState.filterQuery.value,
							onInput: _cache[0] || (_cache[0] = ($event) => handleInput($event.target.value)),
							onKeydown: [
								_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => handleArrowKey("down", $event), ["stop"]), ["down"])),
								withKeys(withModifiers(handleSelect, ["stop"]), ["enter"]),
								_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => handleArrowKey("up", $event), ["stop"]), ["up"]))
							]
						}, null, 40, _hoisted_4)]),
						(openBlock(true), createElementBlock(Fragment, null, renderList(__props.paletteState.filteredCommands.value, (group) => {
							return openBlock(), createElementBlock(Fragment, { key: group.label || "100" }, [withDirectives(createElementVNode("div", { class: "text-c-3 mt-2 mb-1 px-2 text-xs font-medium" }, toDisplayString(group.label), 513), [[vShow, group.commands.length > 0]]), (openBlock(true), createElementBlock(Fragment, null, renderList(group.commands, (command) => {
								return openBlock(), createElementBlock("button", {
									id: command.id,
									key: command.id,
									class: normalizeClass(["commandmenu-item hover:bg-b-2 flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left text-sm", { "bg-b-2": command.id === selectedCommand.value?.id }]),
									type: "button",
									onClick: ($event) => handleCommandClick(command)
								}, ["icon" in command ? (openBlock(), createBlock(resolveDynamicComponent(command.icon), {
									key: 0,
									class: "text-c-2 mr-2.5",
									size: "md",
									thickness: "1.5"
								})) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(command.name), 1)], 10, _hoisted_5);
							}), 128))], 64);
						}), 128)),
						!__props.paletteState.filteredCommands.value.flatMap((p) => p.commands).length ? (openBlock(), createElementBlock("div", _hoisted_6, " No commands found ")) : createCommentVNode("", true)
					])) : (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("button", {
						class: "hover:bg-b-3 text-c-3 active:text-c-1 absolute z-1 mt-[0.5px] rounded p-1.5",
						type: "button",
						onClick: handleBackEvent
					}, [createVNode(unref(ScalarIconCaretLeft), { size: "md" })]), __props.paletteState.activeCommand.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.paletteState.activeCommand.value.component), mergeProps({ key: 0 }, paletteProps.value, {
						onBack: handleBackEvent,
						onClose: handleCloseEvent
					}), null, 16)) : createCommentVNode("", true)]))]),
					_: 1
				})]),
				_: 1
			}, 8, ["open"]);
		};
	}
});
//#endregion
export { TheCommandPalette_vue_vue_type_script_setup_true_lang_default as default };

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