import { useActiveEntities } from "../../store/active-entities.js";
import { useWorkspace } from "../../store/store.js";
import DeleteSidebarListElement_default from "../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import CollectionServerForm_default from "./CollectionServerForm.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton, ScalarIcon, ScalarMarkdown, ScalarModal, useModal } from "@scalar/components";
import { ScalarIconTrash } from "@scalar/icons";
//#region src/views/Collection/CollectionServers.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex h-full w-full flex-col gap-12 px-1.5 pt-8" };
var _hoisted_2 = { class: "flex flex-col gap-4" };
var _hoisted_3 = { class: "rounded-lg border" };
var _hoisted_4 = { class: "bg-b-2 flex items-start justify-between rounded-t-lg py-1 pr-1 pl-3 text-sm" };
var _hoisted_5 = {
	key: 1,
	class: "self-center"
};
var _hoisted_6 = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" };
var CollectionServers_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "CollectionServers",
	setup(__props) {
		const { activeCollection } = useActiveEntities();
		const { servers, events, serverMutators } = useWorkspace();
		const deleteModal = useModal();
		const selectedServerUid = ref(null);
		const collectionServers = computed(() => {
			if (!servers || !activeCollection.value?.servers) return [];
			return Object.values(servers).filter((server) => activeCollection.value?.servers.includes(server.uid));
		});
		/** Add server */
		const handleAddServer = () => events.commandPalette.emit({ commandName: "Add Server" });
		/** Delete server */
		const handleDeleteServer = () => {
			if (!activeCollection.value?.uid || !selectedServerUid.value) return;
			serverMutators.delete(selectedServerUid.value, activeCollection.value.uid);
			deleteModal.hide();
		};
		const openDeleteModal = (serverUid) => {
			selectedServerUid.value = serverUid;
			deleteModal.show();
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
				_cache[2] || (_cache[2] = createStaticVNode("<div class=\"flex items-start justify-between gap-2\"><div class=\"flex flex-col gap-2\"><div class=\"flex h-8 items-center\"><h3 class=\"font-bold\">Servers</h3></div><p class=\"text-sm\"> Add different base URLs for your API. You can use <code class=\"font-code text-c-2\">{variables}</code> for dynamic parts. </p></div></div>", 1)),
				(openBlock(true), createElementBlock(Fragment, null, renderList(collectionServers.value, (server, index) => {
					return openBlock(), createElementBlock("div", { key: server.uid }, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [server.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
						key: 0,
						class: "self-center",
						value: server.description
					}, null, 8, ["value"])) : (openBlock(), createElementBlock("span", _hoisted_5, "Server " + toDisplayString(index + 1), 1)), createVNode(unref(ScalarButton), {
						class: "hover:bg-b-3 hover:text-c-1 h-fit p-1.25",
						variant: "ghost",
						onClick: ($event) => openDeleteModal(server.uid)
					}, {
						default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
						_: 1
					}, 8, ["onClick"])]), unref(activeCollection) ? (openBlock(), createBlock(CollectionServerForm_default, {
						key: 0,
						collectionId: unref(activeCollection).uid,
						serverUid: server.uid
					}, null, 8, ["collectionId", "serverUid"])) : createCommentVNode("", true)])]);
				}), 128)),
				createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarButton), {
					class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
					size: "sm",
					variant: "ghost",
					onClick: handleAddServer
				}, {
					default: withCtx(() => [createVNode(unref(ScalarIcon), {
						class: "inline-flex",
						icon: "Add",
						size: "sm",
						thickness: "1.5"
					}), _cache[1] || (_cache[1] = createElementVNode("span", null, "Add Server", -1))]),
					_: 1
				})])
			]), createVNode(unref(ScalarModal), {
				size: "xxs",
				state: unref(deleteModal),
				title: `Delete ${selectedServerUid.value ? unref(servers)[selectedServerUid.value]?.url : "Server"}`
			}, {
				default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
					variableName: "Server",
					warningMessage: "Are you sure you want to delete this server? This action cannot be undone.",
					onClose: _cache[0] || (_cache[0] = ($event) => unref(deleteModal).hide()),
					onDelete: handleDeleteServer
				})]),
				_: 1
			}, 8, ["state", "title"])]);
		};
	}
});
//#endregion
export { CollectionServers_vue_vue_type_script_setup_true_lang_default as default };

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