import { useActiveEntities } from "../../store/active-entities.js";
import { useSidebar } from "../../hooks/useSidebar.js";
import { DEFAULT_HOTKEYS, handleHotKeyDown } from "../../libs/hot-keys.js";
import { useWorkspace } from "../../store/store.js";
import TopNav_default from "../../components/TopNav/TopNav.vue.js";
import MainLayout_default from "./MainLayout.vue.js";
import { APP_HOTKEYS } from "./hotkeys.js";
import { KeepAlive, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, openBlock, ref, resolveDynamicComponent, unref, watch, withCtx } from "vue";
import { ScalarTeleportRoot, addScalarClassesToHeadless } from "@scalar/components";
import { getThemeStyles } from "@scalar/themes";
import { useBreakpoints } from "@scalar/use-hooks/useBreakpoints";
import { useColorMode } from "@scalar/use-hooks/useColorMode";
import { ScalarToasts } from "@scalar/use-toasts";
import { RouterView } from "vue-router";
//#region src/layouts/App/ApiClientApp.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	id: "scalar-client-app",
	class: "contents"
};
var _hoisted_2 = ["innerHTML"];
var ApiClientApp_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ApiClientApp",
	emits: ["newTab"],
	setup(__props) {
		const hotKeys = {
			...DEFAULT_HOTKEYS,
			...APP_HOTKEYS
		};
		const newTab = ref(null);
		const handleNewTab = (item) => {
			newTab.value = item;
		};
		useColorMode();
		const { activeWorkspace } = useActiveEntities();
		const { events } = useWorkspace();
		onBeforeMount(() => addScalarClassesToHeadless());
		/** Handles the hotkey events, we will pass in custom hotkeys here */
		const handleKeyDown = (ev) => handleHotKeyDown(ev, events.hotKeys, { hotKeys });
		const handleHotKey = (event) => {
			if (!event) return;
			if (event.openCommandPalette) {
				event.openCommandPalette.preventDefault();
				events.commandPalette.emit();
			}
		};
		onMounted(() => {
			window.addEventListener("keydown", handleKeyDown);
			events.hotKeys.on(handleHotKey);
		});
		onBeforeUnmount(() => {
			window.removeEventListener("keydown", handleKeyDown);
			events.hotKeys.off(handleHotKey);
		});
		const { mediaQueries } = useBreakpoints();
		const { setSidebarOpen } = useSidebar();
		watch(mediaQueries.xl, setSidebarOpen, { immediate: true });
		const themeStyleTag = computed(() => activeWorkspace.value && `<style>${getThemeStyles(activeWorkspace.value?.themeId)}</style>`);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarTeleportRoot), null, {
				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
					createElementVNode("div", { innerHTML: themeStyleTag.value }, null, 8, _hoisted_2),
					createVNode(TopNav_default, { openNewTab: newTab.value }, null, 8, ["openNewTab"]),
					unref(activeWorkspace)?.uid ? (openBlock(), createBlock(MainLayout_default, { key: 0 }, {
						default: withCtx(() => [createVNode(unref(RouterView), { onNewTab: handleNewTab }, {
							default: withCtx(({ Component }) => [(openBlock(), createBlock(KeepAlive, null, [(openBlock(), createBlock(resolveDynamicComponent(Component)))], 1024))]),
							_: 1
						})]),
						_: 1
					})) : createCommentVNode("", true),
					createVNode(unref(ScalarToasts))
				])]),
				_: 1
			});
		};
	}
});
//#endregion
export { ApiClientApp_vue_vue_type_script_setup_true_lang_default as default };

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