import { ROUTES } from "../../constants.js";
import { useActiveEntities } from "../../store/active-entities.js";
import { useWorkspace } from "../../store/store.js";
import ContextMenu_default from "../../v2/components/context-menu/ContextMenu.vue.js";
import TopNavItem_default from "./TopNavItem.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
import { ScalarDropdownButton, ScalarDropdownMenu, ScalarFloating, ScalarHotkey, ScalarIcon } from "@scalar/components";
import { useRouter } from "vue-router";
import { LibraryIcon } from "@scalar/icons/library";
import { useClipboard } from "@scalar/use-hooks/useClipboard";
//#region src/components/TopNav/TopNav.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2" };
var _hoisted_2 = { class: "relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium" };
var _hoisted_3 = {
	key: 0,
	class: "h-full w-full overflow-hidden"
};
var TopNav_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "TopNav",
	props: { openNewTab: {} },
	setup(__props) {
		const props = __props;
		const { activeRequest, activeCollection } = useActiveEntities();
		const router = useRouter();
		const { events } = useWorkspace();
		const { copyToClipboard } = useClipboard();
		/** Nav Items list */
		const topNavItems = reactive([{
			label: "",
			path: "",
			icon: "Add",
			isCollection: false
		}]);
		const activeNavItemIdx = ref(0);
		const activeNavItemIdxValue = computed(() => activeNavItemIdx.value);
		/**
		* Check if the current route is a collection
		*/
		const isCollection = computed(() => {
			return router.currentRoute.value.name?.toString().startsWith("collection.");
		});
		/**
		* Logic to handle adding a nav item
		* based on the current route
		*/
		function handleNavLabelAdd() {
			if (isCollection.value) {
				topNavItems[activeNavItemIdx.value] = {
					label: activeCollection.value?.info?.title || "Untitled Collection",
					path: router.currentRoute.value.path,
					icon: activeCollection.value?.["x-scalar-icon"] || "Collection",
					isCollection: true
				};
				return;
			}
			if (router.currentRoute.value.name?.toString().startsWith("request")) {
				topNavItems[activeNavItemIdx.value] = {
					label: activeRequest.value?.summary || "",
					path: router.currentRoute.value.path,
					icon: "ExternalLink",
					isCollection: false
				};
				return;
			}
			const activeRoute = ROUTES.find((route) => {
				return route.to.name.startsWith(router.currentRoute.value.name?.toString() ?? "");
			});
			if (activeRoute) {
				topNavItems[activeNavItemIdx.value] = {
					label: activeRoute.displayName,
					path: router.currentRoute.value.path,
					icon: activeRoute.icon,
					isCollection: false
				};
				return;
			}
		}
		function handleNavRoute() {
			const path = topNavItems[activeNavItemIdx.value]?.path;
			if (path) router.push(path);
		}
		/**
		* adding a nav item sets the new index and nav item
		* based on the route
		*/
		function addNavItem() {
			topNavItems.push({
				label: "",
				path: "",
				icon: "Add",
				isCollection: false
			});
			activeNavItemIdx.value = topNavItems.length - 1;
			handleNavLabelAdd();
		}
		function setNavItemIdx(idx) {
			activeNavItemIdx.value = idx;
			handleNavRoute();
		}
		watch(() => router.currentRoute.value.path, () => {
			handleNavLabelAdd();
		}, { immediate: true });
		function removeNavItem(idx) {
			topNavItems.splice(idx, 1);
			activeNavItemIdx.value = Math.min(activeNavItemIdx.value, topNavItems.length - 1);
			handleNavRoute();
		}
		const copyUrl = async (idx) => {
			if (!topNavItems[idx]?.path) return;
			const fullUrl = new URL(window.location.href);
			fullUrl.pathname = topNavItems[idx].path;
			await copyToClipboard(fullUrl.toString());
		};
		const closeOtherTabs = (idx) => {
			topNavItems.splice(0, idx);
			topNavItems.splice(1);
			activeNavItemIdx.value = 0;
			handleNavRoute();
		};
		/** Handle hotkeys */
		const handleHotKey = (event) => {
			if (!event) return;
			if (event.addTopNav) addNavItem();
			if (event.closeTopNav) removeNavItem(activeNavItemIdx.value);
			if (event.navigateTopNavLeft) setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0));
			if (event.navigateTopNavRight) setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1));
			if (event.jumpToTab) {
				const tabIndex = Number(event.jumpToTab.key) - 1;
				if (tabIndex >= 0 && tabIndex < topNavItems.length) setNavItemIdx(tabIndex);
			}
			if (event.jumpToLastTab) setNavItemIdx(topNavItems.length - 1);
		};
		const addTopNavTab = (item) => {
			topNavItems.push({
				label: item.name,
				path: item.uid,
				icon: "ExternalLink",
				isCollection: false
			});
		};
		watch(() => props.openNewTab, (openNewTab) => {
			if (openNewTab) addTopNavTab(openNewTab);
		}, { immediate: true });
		onMounted(() => events.hotKeys.on(handleHotKey));
		onBeforeUnmount(() => events.hotKeys.off(handleHotKey));
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("nav", _hoisted_1, [_cache[3] || (_cache[3] = createElementVNode("div", { class: "app-drag-region absolute inset-0" }, null, -1)), createElementVNode("div", _hoisted_2, [topNavItems.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ContextMenu_default), { triggerClass: "flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap" }, {
				trigger: withCtx(() => [isCollection.value ? (openBlock(), createBlock(unref(LibraryIcon), {
					key: 0,
					class: "size-3.5 min-w-3.5 stroke-2",
					src: unref(activeCollection)?.["x-scalar-icon"] || "Collection"
				}, null, 8, ["src"])) : topNavItems[0]?.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
					key: 1,
					icon: topNavItems[0]?.icon,
					size: "xs",
					thickness: "2.5"
				}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(topNavItems[0]?.label), 1)]),
				content: withCtx(() => [createVNode(unref(ScalarFloating), { placement: "right-start" }, {
					floating: withCtx(() => [createVNode(unref(ScalarDropdownMenu), { class: "scalar-app scalar-client" }, {
						default: withCtx(() => [createVNode(unref(ScalarDropdownButton), {
							class: "flex items-center gap-1.5",
							onClick: addNavItem
						}, {
							default: withCtx(() => [
								createVNode(unref(ScalarIcon), {
									icon: "AddTab",
									size: "sm",
									thickness: "1.5"
								}),
								_cache[1] || (_cache[1] = createTextVNode(" New Tab ", -1)),
								createVNode(unref(ScalarHotkey), {
									class: "bg-b-2 ml-auto",
									hotkey: "T"
								})
							]),
							_: 1
						}), createVNode(unref(ScalarDropdownButton), {
							class: "flex items-center gap-1.5",
							onClick: _cache[0] || (_cache[0] = ($event) => copyUrl(activeNavItemIdxValue.value))
						}, {
							default: withCtx(() => [createVNode(unref(ScalarIcon), {
								icon: "Link",
								size: "sm",
								thickness: "1.5"
							}), _cache[2] || (_cache[2] = createTextVNode(" Copy URL ", -1))]),
							_: 1
						})]),
						_: 1
					})]),
					_: 1
				})]),
				_: 1
			})])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(topNavItems, (topNavItem, index) => {
				return openBlock(), createBlock(TopNavItem_default, {
					key: topNavItem.path,
					active: index === activeNavItemIdxValue.value,
					hotkey: (index + 1).toString(),
					icon: topNavItem.isCollection ? unref(activeCollection)?.["x-scalar-icon"] || "Collection" : topNavItem.icon,
					isCollection: topNavItem.isCollection || false,
					label: topNavItem.label,
					onClick: ($event) => setNavItemIdx(index),
					onClose: ($event) => removeNavItem(index),
					onCloseOtherTabs: ($event) => closeOtherTabs(index),
					onCopyUrl: ($event) => copyUrl(index),
					onNewTab: addNavItem
				}, null, 8, [
					"active",
					"hotkey",
					"icon",
					"isCollection",
					"label",
					"onClick",
					"onClose",
					"onCloseOtherTabs",
					"onCopyUrl"
				]);
			}), 128)), createElementVNode("button", {
				class: "text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5",
				type: "button",
				onClick: addNavItem
			}, [createVNode(unref(ScalarIcon), {
				icon: "Add",
				size: "sm",
				thickness: "2.5"
			})])])]);
		};
	}
});
//#endregion
export { TopNav_vue_vue_type_script_setup_true_lang_default as default };

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