import { useLayout } from "../../hooks/useLayout.js";
import { useWorkspace } from "../../store/store.js";
import ServerDropdownItem_default from "./ServerDropdownItem.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
import { ScalarButton, ScalarDropdownDivider, ScalarFloatingBackdrop, ScalarIcon, ScalarPopover } from "@scalar/components";
import { emitCustomEvent } from "@scalar/workspace-store/events";
//#region src/components/Server/ServerDropdown.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["onClick"];
var _hoisted_2 = { class: "flex h-4 w-4 items-center justify-center" };
var ServerDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ServerDropdown",
	props: {
		collection: {},
		operation: {},
		server: {},
		target: {}
	},
	setup(__props) {
		const { layout } = useLayout();
		const { servers, collectionMutators, events, serverMutators } = useWorkspace();
		const requestServerOptions = computed(() => __props.operation?.servers?.map((serverUid) => ({
			id: serverUid,
			label: servers[serverUid]?.url ?? "Unknown server"
		})));
		const collectionServerOptions = computed(() => __props.collection?.servers?.filter((serverUid) => !__props.operation?.servers?.includes(serverUid)).map((serverUid) => ({
			id: serverUid,
			label: servers[serverUid]?.url ?? "Unknown server"
		})));
		/** If we have both request and collection servers we show the labels */
		const showDropdownLabels = computed(() => requestServerOptions.value?.length && collectionServerOptions.value?.length);
		watch([() => __props.collection, () => __props.operation], ([newCollection, newOperation]) => {
			if (!newCollection || newCollection.selectedServerUid || newOperation?.selectedServerUid) return;
			const firstServer = __props.collection.servers?.[0];
			if (firstServer) collectionMutators.edit(__props.collection.uid, "selectedServerUid", firstServer);
		});
		/** Add server */
		const handleAddServer = () => events.commandPalette.emit({ commandName: "Add Server" });
		const serverUrlWithoutTrailingSlash = computed(() => {
			if (__props.server?.url?.endsWith("/")) return __props.server.url.slice(0, -1);
			return __props.server?.url || "";
		});
		const updateServerVariable = (key, value) => {
			if (!__props.server) return;
			const variables = __props.server.variables || {};
			variables[key] = {
				...variables[key],
				default: value
			};
			serverMutators.edit(__props.server.uid, "variables", variables);
			emitCustomEvent(wrapper.value?.$el, "scalar-update-selected-server-variables", {
				key,
				value
			});
		};
		const wrapper = useTemplateRef("wrapper-ref");
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarPopover), {
				ref: "wrapper-ref",
				class: "max-h-[inherit] p-0 text-base",
				focus: "",
				offset: 0,
				placement: "bottom-start",
				resize: "",
				target: __props.target,
				teleport: `#${__props.target}`
			}, {
				popover: withCtx(({ close }) => [createElementVNode("div", {
					class: "custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1",
					onClick: close
				}, [
					(openBlock(true), createElementBlock(Fragment, null, renderList(requestServerOptions.value, (serverOption) => {
						return openBlock(), createBlock(ServerDropdownItem_default, {
							key: serverOption.id,
							collection: __props.collection,
							operation: __props.operation,
							server: __props.server,
							serverOption,
							type: "request",
							"onUpdate:variable": updateServerVariable
						}, null, 8, [
							"collection",
							"operation",
							"server",
							"serverOption"
						]);
					}), 128)),
					showDropdownLabels.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(ScalarDropdownDivider)), _cache[2] || (_cache[2] = createElementVNode("div", { class: "text-xxs text-c-2 px-2.5 py-1" }, "Collection", -1))], 64)) : createCommentVNode("", true),
					(openBlock(true), createElementBlock(Fragment, null, renderList(collectionServerOptions.value, (serverOption) => {
						return openBlock(), createBlock(ServerDropdownItem_default, {
							key: serverOption.id,
							collection: __props.collection,
							operation: __props.operation,
							server: __props.server,
							serverOption,
							type: "collection",
							"onUpdate:variable": updateServerVariable
						}, null, 8, [
							"collection",
							"operation",
							"server",
							"serverOption"
						]);
					}), 128)),
					unref(layout) !== "modal" ? (openBlock(), createElementBlock("button", {
						key: 1,
						class: "text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75",
						type: "button",
						onClick: handleAddServer
					}, [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarIcon), {
						icon: "Add",
						size: "sm"
					})]), _cache[3] || (_cache[3] = createElementVNode("span", null, "Add Server", -1))])) : createCommentVNode("", true)
				], 8, _hoisted_1)]),
				backdrop: withCtx(() => [createVNode(unref(ScalarFloatingBackdrop), { class: "-top-(--scalar-address-bar-height) rounded-lg" })]),
				default: withCtx(() => [createVNode(unref(ScalarButton), {
					class: "z-context-plus hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap",
					variant: "ghost"
				}, {
					default: withCtx(() => [__props.operation?.selectedServerUid || __props.collection.selectedServerUid ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)), createTextVNode(" " + toDisplayString(serverUrlWithoutTrailingSlash.value), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Add Server", -1)), createVNode(unref(ScalarIcon), {
						icon: "Add",
						size: "xs"
					})], 64))]),
					_: 1
				})]),
				_: 1
			}, 8, ["target", "teleport"]);
		};
	}
});
//#endregion
export { ServerDropdown_vue_vue_type_script_setup_true_lang_default as default };

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