import { useWorkspace } from "../../store/store.js";
import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, watch, withCtx } from "vue";
import { ScalarButton, ScalarListbox } from "@scalar/components";
import { ScalarIconCaretDown } from "@scalar/icons";
//#region src/components/Server/ServerSelector.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "overflow-x-auto" };
var _hoisted_2 = {
	key: 1,
	class: "text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap"
};
var _hoisted_3 = { class: "overflow-x-auto" };
var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ServerSelector",
	props: {
		collection: {},
		server: {},
		target: {}
	},
	emits: ["updateServer"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const { servers, collectionMutators } = useWorkspace();
		const serverOptions = computed(() => __props.collection?.servers.map((serverUid) => ({
			id: serverUid,
			label: servers[serverUid]?.url ?? "Unknown server"
		})));
		const selectedServer = computed({
			get: () => __props.server ? serverOptions.value.find((option) => option.id === __props.server.uid) : void 0,
			set: (option) => {
				if (!option) return;
				collectionMutators.edit(__props.collection.uid, "selectedServerUid", option.id);
				const serverUrl = servers[option.id]?.url;
				if (serverUrl) emit("updateServer", serverUrl);
			}
		});
		watch(() => __props.collection, (newCollection) => {
			if (!newCollection || newCollection.selectedServerUid) return;
			const firstServer = __props.collection.servers?.[0];
			if (firstServer) {
				collectionMutators.edit(__props.collection.uid, "selectedServerUid", firstServer);
				if (servers[firstServer]?.url) emit("updateServer", servers[firstServer].url);
			}
		});
		const serverUrlWithoutTrailingSlash = computed(() => {
			if (__props.server?.url?.endsWith("/")) return __props.server.url.slice(0, -1);
			return __props.server?.url || "";
		});
		return (_ctx, _cache) => {
			return serverOptions.value.length > 1 ? (openBlock(), createBlock(unref(ScalarListbox), {
				key: 0,
				modelValue: selectedServer.value,
				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedServer.value = $event),
				class: "group",
				options: serverOptions.value,
				placement: "bottom-start",
				resize: "",
				target: __props.target,
				teleport: `#${__props.target}`
			}, {
				default: withCtx(() => [createVNode(unref(ScalarButton), {
					class: "bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1",
					variant: "ghost"
				}, {
					default: withCtx(() => [
						_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)),
						createElementVNode("span", _hoisted_1, toDisplayString(serverUrlWithoutTrailingSlash.value), 1),
						createVNode(unref(ScalarIconCaretDown), {
							class: "text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100",
							weight: "bold"
						})
					]),
					_: 1
				})]),
				_: 1
			}, 8, [
				"modelValue",
				"options",
				"target",
				"teleport"
			])) : (openBlock(), createElementBlock("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)), createElementVNode("span", _hoisted_3, toDisplayString(serverUrlWithoutTrailingSlash.value), 1)]));
		};
	}
});
//#endregion
export { ServerSelector_vue_vue_type_script_setup_true_lang_default as default };

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