import { useActiveEntities } from "../../store/active-entities.js";
import { useWorkspace } from "../../store/store.js";
import ViewLayoutSection_default from "../../components/ViewLayout/ViewLayoutSection.vue.js";
import DeleteSidebarListElement_default from "../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import EditSidebarListElement_default from "../../components/Sidebar/Actions/EditSidebarListElement.vue.js";
import EnvironmentColorModal_default from "../Environment/EnvironmentColorModal.vue.js";
import EnvironmentModal_default from "../Environment/EnvironmentModal.vue.js";
import EnvironmentForm_default from "./components/EnvironmentForm.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton, ScalarIcon, ScalarModal, useModal } from "@scalar/components";
import { ScalarIconTrash } from "@scalar/icons";
import { Draggable } from "@scalar/draggable";
//#region src/views/Collection/CollectionEnvironment.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 cursor-grab items-center justify-between rounded-t-lg px-1 py-1 text-sm" };
var _hoisted_5 = { class: "flex items-center" };
var _hoisted_6 = ["onClick"];
var _hoisted_7 = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" };
var CollectionEnvironment_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "CollectionEnvironment",
	setup(__props) {
		const { activeCollection, activeWorkspace, activeEnvVariables } = useActiveEntities();
		const { collectionMutators } = useWorkspace();
		const colorModal = useModal();
		const deleteModal = useModal();
		const environmentModal = useModal();
		const editModal = useModal();
		const selectedColor = ref("");
		const selectedEnvironmentName = ref(null);
		const tempEnvironmentName = ref(void 0);
		const collectionEnvironments = computed(() => {
			if (!activeCollection.value?.["x-scalar-environments"]) return [];
			return Object.entries(activeCollection.value["x-scalar-environments"]).map(([name, environment]) => ({
				uid: name,
				name,
				value: JSON.stringify(environment.variables || {}),
				color: environment.color || "#FFFFFF"
			}));
		});
		const deleteEnvironment = () => {
			if (!activeCollection.value?.uid || !selectedEnvironmentName.value) return;
			collectionMutators.removeEnvironment(selectedEnvironmentName.value, activeCollection.value.uid);
			deleteModal.hide();
		};
		const openDeleteModal = (environmentName) => {
			selectedEnvironmentName.value = environmentName;
			deleteModal.show();
		};
		const handleEnvironmentSubmit = (environment) => {
			if (!activeCollection.value?.uid) return;
			collectionMutators.addEnvironment(environment.name, {
				variables: {},
				color: environment.color
			}, activeCollection.value.uid);
			environmentModal.hide();
		};
		const handleOpenColorModal = (environment) => {
			selectedEnvironmentName.value = environment.name;
			selectedColor.value = environment.color || "#FFFFFF";
			colorModal.show();
		};
		const submitColorChange = (color) => {
			if (!activeCollection.value?.uid || !selectedEnvironmentName.value) return;
			const environments = {
				...activeCollection.value["x-scalar-environments"],
				[selectedEnvironmentName.value]: {
					variables: activeCollection.value["x-scalar-environments"]?.[selectedEnvironmentName.value]?.variables || {},
					color
				}
			};
			collectionMutators.edit(activeCollection.value.uid, "x-scalar-environments", environments);
			colorModal.hide();
		};
		const openRenameModal = (environmentName) => {
			selectedEnvironmentName.value = environmentName;
			tempEnvironmentName.value = environmentName;
			editModal.show();
		};
		const closeRenameModal = () => {
			selectedEnvironmentName.value = null;
			tempEnvironmentName.value = void 0;
			editModal.hide();
		};
		const handleRename = (newName) => {
			if (!activeCollection.value?.uid || !selectedEnvironmentName.value) return;
			const environments = { ...activeCollection.value["x-scalar-environments"] };
			if (!environments[selectedEnvironmentName.value]) return;
			const orderedEnvs = {};
			const envEntries = Object.entries(environments);
			const envIndex = envEntries.findIndex(([key]) => key === selectedEnvironmentName.value);
			envEntries.forEach(([key, value], index) => {
				if (index === envIndex) orderedEnvs[newName] = value;
				else orderedEnvs[key] = value;
			});
			collectionMutators.edit(activeCollection.value.uid, "x-scalar-environments", orderedEnvs);
			selectedEnvironmentName.value = null;
			tempEnvironmentName.value = void 0;
			editModal.hide();
		};
		const handleDragEnd = (draggingItem, hoveredItem) => {
			if (!activeCollection.value?.uid) return;
			const environments = { ...activeCollection.value["x-scalar-environments"] };
			const orderedEnvs = {};
			const envEntries = Object.entries(environments);
			const dragIndex = envEntries.findIndex(([key]) => key === draggingItem.id);
			const hoverIndex = envEntries.findIndex(([key]) => key === hoveredItem.id);
			if (dragIndex === -1 || hoverIndex === -1) return;
			const draggedEnv = envEntries[dragIndex];
			if (!draggedEnv) return;
			envEntries.splice(dragIndex, 1);
			envEntries.splice(hoverIndex, 0, draggedEnv);
			envEntries.forEach(([key, value]) => {
				orderedEnvs[key] = value;
			});
			collectionMutators.edit(activeCollection.value.uid, "x-scalar-environments", orderedEnvs);
		};
		return (_ctx, _cache) => {
			return openBlock(), createBlock(ViewLayoutSection_default, null, {
				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
					createElementVNode("div", _hoisted_2, [
						_cache[5] || (_cache[5] = createElementVNode("div", { class: "flex items-start justify-between gap-2" }, [createElementVNode("div", { class: "flex flex-col gap-2" }, [createElementVNode("div", { class: "flex h-8 items-center" }, [createElementVNode("h3", { class: "font-bold" }, "Environment Variables")]), createElementVNode("p", { class: "text-sm" }, [
							createTextVNode(" Set environment variables at your collection level. Use "),
							createElementVNode("code", { class: "font-code text-c-2" }, "{{ variable }}"),
							createTextVNode(" to add / search among the selected environment's variables in your request inputs. ")
						])])], -1)),
						(openBlock(true), createElementBlock(Fragment, null, renderList(collectionEnvironments.value, (environment) => {
							return openBlock(), createBlock(unref(Draggable), {
								key: environment.name,
								id: environment.name,
								isDraggable: true,
								isDroppable: true,
								parentIds: [],
								onOnDragEnd: handleDragEnd
							}, {
								default: withCtx(() => [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarButton), {
									class: "hover:bg-b-3 flex h-6 w-6 p-1",
									onClick: ($event) => handleOpenColorModal(environment),
									variant: "ghost"
								}, {
									default: withCtx(() => [createElementVNode("span", {
										style: normalizeStyle({ backgroundColor: environment.color || "#FFFFFF" }),
										class: "h-2.5 w-2.5 rounded-full"
									}, null, 4)]),
									_: 2
								}, 1032, ["onClick"]), createElementVNode("button", {
									class: "hover:bg-b-3 rounded px-1 py-0.5 text-sm",
									onClick: ($event) => openRenameModal(environment.name)
								}, toDisplayString(environment.name), 9, _hoisted_6)]), createVNode(unref(ScalarButton), {
									class: "hover:bg-b-3 hover:text-c-1 h-fit p-1.25",
									variant: "ghost",
									onClick: ($event) => openDeleteModal(environment.name)
								}, {
									default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
									_: 1
								}, 8, ["onClick"])]), unref(activeCollection) && unref(activeWorkspace) ? (openBlock(), createBlock(EnvironmentForm_default, {
									key: 0,
									collection: unref(activeCollection),
									environment,
									envVariables: unref(activeEnvVariables),
									workspace: unref(activeWorkspace)
								}, null, 8, [
									"collection",
									"environment",
									"envVariables",
									"workspace"
								])) : createCommentVNode("", true)])]),
								_: 2
							}, 1032, ["id"]);
						}), 128)),
						createElementVNode("div", _hoisted_7, [createVNode(unref(ScalarButton), {
							class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
							size: "sm",
							variant: "ghost",
							onClick: _cache[0] || (_cache[0] = ($event) => unref(environmentModal).show())
						}, {
							default: withCtx(() => [createVNode(unref(ScalarIcon), {
								class: "inline-flex",
								icon: "Add",
								size: "sm",
								thickness: "1.5"
							}), _cache[4] || (_cache[4] = createElementVNode("span", null, "Add Environment", -1))]),
							_: 1
						})])
					]),
					createVNode(unref(ScalarModal), {
						size: "xxs",
						state: unref(deleteModal),
						title: `Delete ${selectedEnvironmentName.value || "Environment"}`
					}, {
						default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
							variableName: "Environment",
							warningMessage: "Are you sure you want to delete this environment? This action cannot be undone.",
							onClose: _cache[1] || (_cache[1] = ($event) => unref(deleteModal).hide()),
							onDelete: deleteEnvironment
						})]),
						_: 1
					}, 8, ["state", "title"]),
					createVNode(EnvironmentModal_default, {
						activeWorkspaceCollections: unref(activeCollection) ? [unref(activeCollection)] : [],
						collectionId: unref(activeCollection)?.uid,
						state: unref(environmentModal),
						onCancel: _cache[2] || (_cache[2] = ($event) => unref(environmentModal).hide()),
						onSubmit: handleEnvironmentSubmit
					}, null, 8, [
						"activeWorkspaceCollections",
						"collectionId",
						"state"
					]),
					createVNode(EnvironmentColorModal_default, {
						selectedColor: selectedColor.value,
						state: unref(colorModal),
						onCancel: _cache[3] || (_cache[3] = ($event) => unref(colorModal).hide()),
						onSubmit: submitColorChange
					}, null, 8, ["selectedColor", "state"]),
					createVNode(unref(ScalarModal), {
						size: "xxs",
						state: unref(editModal),
						title: `Edit ${selectedEnvironmentName.value}`
					}, {
						default: withCtx(() => [createVNode(EditSidebarListElement_default, {
							name: tempEnvironmentName.value ?? "",
							onClose: closeRenameModal,
							onEdit: handleRename
						}, null, 8, ["name"])]),
						_: 1
					}, 8, ["state", "title"])
				])]),
				_: 1
			});
		};
	}
});
//#endregion
export { CollectionEnvironment_vue_vue_type_script_setup_true_lang_default as default };

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