import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
import { n as CommandActionForm_default, t as CommandActionInput_default } from "./CommandActionInput-TkcAx6E8.js";
import { t as CodeInput_default } from "./code-input-iq-moLxi.js";
import { i as DataTableHeader_default, n as DataTableRow_default, o as DataTableCell_default, s as DataTable_default } from "./data-table-PL7e8NRO.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, vModelText, watch, withCtx, withDirectives } from "vue";
import { ScalarButton, ScalarIcon, ScalarIconButton, ScalarModal, useModal } from "@scalar/components";
import { ScalarIconNotePencil, ScalarIconPlus, ScalarIconTrash } from "@scalar/icons";
//#region src/v2/features/environments/components/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$4 = {
	key: 1,
	class: "color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1"
};
var _hoisted_2$2 = ["onClick"];
var _hoisted_3$1 = {
	key: 2,
	class: "color-selector flex h-4 flex-1 items-center gap-2 rounded"
};
var _hoisted_4$1 = ["placeholder"];
var DEFAULT_GRADIENT = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))";
//#endregion
//#region src/v2/features/environments/components/EnvironmentColors.vue
var EnvironmentColors_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentColors",
	props: { activeColor: {} },
	emits: ["select"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const customColor = ref("");
		const customColorInputRef = ref(null);
		const showCustomInput = ref(false);
		const showSelector = ref(false);
		/**
		* Predefined color options available in the color picker.
		* Each option provides a standard color choice for the environment.
		*/
		const colorOptions = [
			"#FFFFFF",
			"#EF0006",
			"#EDBE20",
			"#069061",
			"#FB892C",
			"#0082D0",
			"#5203D1",
			"#FFC0CB"
		];
		/** Default gradient shown when no custom color is selected. */
		const isPresetColor = computed(() => colorOptions.includes(__props.activeColor));
		/** Check if a custom color is being used (not in the preset list). */
		const isCustomColor = computed(() => __props.activeColor && !isPresetColor.value && !showCustomInput.value);
		/** Check if the given color matches the currently active color. */
		const isActiveColor = (color) => __props.activeColor === color;
		/**
		* Style for the custom color button.
		* Shows the actual color if custom, otherwise shows a gradient.
		*/
		const customButtonStyle = computed(() => {
			const displayColor = customColor.value || __props.activeColor;
			return isCustomColor.value || customColor.value ? `background-color: ${displayColor};` : `background: ${DEFAULT_GRADIENT};`;
		});
		/**
		* Toggle the custom color input visibility.
		* Focuses the input after it becomes visible.
		*/
		const toggleCustomInput = async () => {
			showCustomInput.value = !showCustomInput.value;
			showSelector.value = false;
			if (!showCustomInput.value) return;
			await nextTick();
			customColorInputRef.value?.focus();
		};
		/** Toggle the color selector visibility. */
		const toggleSelector = () => {
			showSelector.value = !showSelector.value;
		};
		/**
		* Select a color and emit the selection event.
		* Ensures the color value has a # prefix for hex colors.
		*/
		const selectColor = (color) => {
			emit("select", color && !color.startsWith("#") ? `#${color}` : color);
			showSelector.value = false;
		};
		/**
		* Handle custom color input changes.
		* Formats the color and emits the selection.
		*/
		const handleCustomColorInput = () => {
			if (!customColor.value) return;
			const formattedColor = customColor.value.startsWith("#") ? customColor.value : `#${customColor.value}`;
			customColor.value = formattedColor;
			selectColor(formattedColor);
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", null, [
				!showCustomInput.value && !showSelector.value ? (openBlock(), createElementBlock("div", {
					key: 0,
					class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
					style: normalizeStyle({ backgroundColor: __props.activeColor }),
					onClick: toggleSelector
				}, [__props.activeColor ? (openBlock(), createBlock(unref(ScalarIcon), {
					key: 0,
					class: "text-c-btn p-0.5",
					icon: "Checkmark",
					size: "xs"
				})) : createCommentVNode("", true)], 4)) : createCommentVNode("", true),
				!showCustomInput.value && showSelector.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
					(openBlock(), createElementBlock(Fragment, null, renderList(colorOptions, (option) => {
						return createElementVNode("div", {
							key: option,
							class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
							style: normalizeStyle({ backgroundColor: option }),
							onClick: ($event) => selectColor(option)
						}, [isActiveColor(option) ? (openBlock(), createBlock(unref(ScalarIcon), {
							key: 0,
							class: "text-c-btn p-0.5",
							icon: "Checkmark",
							size: "xs"
						})) : createCommentVNode("", true)], 12, _hoisted_2$2);
					}), 64)),
					_cache[1] || (_cache[1] = createElementVNode("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
					createElementVNode("button", {
						class: "z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full",
						style: normalizeStyle(customButtonStyle.value),
						type: "button",
						onClick: toggleCustomInput
					}, [isCustomColor.value ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						class: "text-c-btn",
						icon: "Checkmark",
						size: "xs"
					})) : createCommentVNode("", true)], 4)
				])) : createCommentVNode("", true),
				showCustomInput.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
					_cache[2] || (_cache[2] = createElementVNode("span", { class: "absolute h-4 w-4 rounded-full border border-dashed" }, null, -1)),
					createElementVNode("span", {
						class: "z-[1] h-4 w-4 rounded-full",
						style: normalizeStyle(customButtonStyle.value)
					}, null, 4),
					withDirectives(createElementVNode("input", {
						ref_key: "customColorInputRef",
						ref: customColorInputRef,
						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
						class: "w-full flex-1 border-transparent text-sm outline-none",
						placeholder: __props.activeColor || "#000000",
						type: "text",
						onInput: handleCustomColorInput
					}, null, 40, _hoisted_4$1), [[vModelText, customColor.value]]),
					createElementVNode("button", {
						class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
						type: "button",
						onClick: toggleCustomInput
					}, [createVNode(unref(ScalarIcon), {
						icon: "Checkmark",
						size: "xs"
					})])
				])) : createCommentVNode("", true)
			]);
		};
	}
});
//#endregion
//#region src/v2/features/environments/components/EnvironmentCreateModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$3 = { class: "flex items-start gap-2" };
var _hoisted_2$1 = {
	key: 0,
	class: "text-red text-xs"
};
var DEFAULT_COLOR = "#FFFFFF";
//#endregion
//#region src/v2/features/environments/components/EnvironmentCreateModal.vue
var EnvironmentCreateModal_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentCreateModal",
	props: {
		environments: {},
		selectedEnvironmentName: {},
		state: {},
		eventBus: {},
		collectionType: {}
	},
	setup(__props) {
		/** Default color for new environments. */
		const name = ref("");
		const selectedColor = ref(DEFAULT_COLOR);
		/** Ensure [re]set the form on open */
		watch(() => __props.state.open, (isOpen) => {
			if (isOpen) {
				const environment = __props.environments[__props.selectedEnvironmentName ?? ""];
				if (__props.selectedEnvironmentName && environment) {
					name.value = __props.selectedEnvironmentName;
					selectedColor.value = environment.color;
				} else {
					name.value = "";
					selectedColor.value = DEFAULT_COLOR;
				}
			}
		});
		/**
		* Handle color selection from the color picker.
		* Updates the selected color for the new environment.
		*/
		const handleColorSelect = (color) => {
			selectedColor.value = color;
		};
		/** Emits an event to create the environment with the provided name and color. */
		const handleSubmit = () => {
			if (__props.selectedEnvironmentName) __props.eventBus.emit("environment:upsert:environment", {
				oldEnvironmentName: __props.selectedEnvironmentName,
				payload: { color: selectedColor.value },
				environmentName: name.value.trim(),
				collectionType: __props.collectionType
			});
			else __props.eventBus.emit("environment:upsert:environment", {
				environmentName: name.value.trim(),
				payload: { color: selectedColor.value },
				collectionType: __props.collectionType
			});
			__props.state.hide();
		};
		/** Check if the environment name is a duplicate */
		const isDuplicateName = computed(() => {
			if (__props.selectedEnvironmentName) return name.value !== __props.selectedEnvironmentName && Object.keys(__props.environments).includes(name.value);
			return Object.keys(__props.environments).includes(name.value);
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarModal), {
				bodyClass: "border-t-0 rounded-t-lg",
				size: "xs",
				state: __props.state
			}, {
				default: withCtx(() => [createVNode(CommandActionForm_default, {
					disabled: !name.value.trim() || isDuplicateName.value,
					onSubmit: handleSubmit
				}, {
					submit: withCtx(() => [createTextVNode(toDisplayString(__props.selectedEnvironmentName ? "Update" : "Add") + " Environment ", 1)]),
					default: withCtx(() => [createElementVNode("div", _hoisted_1$3, [createVNode(EnvironmentColors_default, {
						activeColor: selectedColor.value,
						class: "peer",
						onSelect: handleColorSelect
					}, null, 8, ["activeColor"]), createVNode(CommandActionInput_default, {
						modelValue: name.value,
						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => name.value = $event),
						class: "-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden",
						placeholder: "Environment name"
					}, null, 8, ["modelValue"])]), isDuplicateName.value ? (openBlock(), createElementBlock("div", _hoisted_2$1, " This environment name is already in use. ")) : createCommentVNode("", true)]),
					_: 1
				}, 8, ["disabled"])]),
				_: 1
			}, 8, ["state"]);
		};
	}
});
//#endregion
//#region src/v2/features/environments/components/EnvironmentDeleteModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$2 = { class: "flex justify-between" };
//#endregion
//#region src/v2/features/environments/components/EnvironmentDeleteModal.vue
var EnvironmentDeleteModal_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentDeleteModal",
	props: {
		state: {},
		name: { default: "unknown" }
	},
	emits: ["cancel", "submit"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarModal), {
				bodyClass: "border-t-0 rounded-t-lg flex flex-col gap-4",
				size: "xxs",
				state: __props.state,
				title: `Delete ${__props.name}`
			}, {
				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("p", { class: "text-c-2 text-sm leading-normal text-pretty" }, " Are you sure you want to delete this environment? This action cannot be undone. ", -1)), createElementVNode("div", _hoisted_1$2, [createVNode(unref(ScalarButton), {
					size: "sm",
					variant: "outlined",
					onClick: _cache[0] || (_cache[0] = () => {
						emit("cancel");
						__props.state.hide();
					})
				}, {
					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
					_: 1
				}), createVNode(unref(ScalarButton), {
					size: "sm",
					variant: "danger",
					onClick: _cache[1] || (_cache[1] = () => {
						emit("submit");
						__props.state.hide();
					})
				}, {
					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Delete Environment ", -1)])]),
					_: 1
				})])]),
				_: 1
			}, 8, ["state", "title"]);
		};
	}
});
//#endregion
//#region src/v2/features/environments/components/EnvironmentVariablesTable.vue
var EnvironmentVariablesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
	__name: "EnvironmentVariablesTable",
	props: {
		environment: {},
		environmentName: {},
		eventBus: {},
		collectionType: {}
	},
	setup(__props) {
		/** Column widths: Name, Value, Actions (delete button) */
		const COLUMNS = [
			"1fr",
			"1fr",
			"36px"
		];
		/** Adds an empty row at the end for creating new variables */
		const displayRows = computed(() => {
			/** Normalize the variables to have a name and value */
			const variableRows = __props.environment.variables.map((v) => ({
				name: v.name,
				value: typeof v.value === "string" ? v.value : v.value.default
			}));
			const lastRow = __props.environment.variables.at(-1);
			const hasContentInLastRow = lastRow && (lastRow.name !== "" || lastRow.value !== "");
			if (!lastRow || hasContentInLastRow) return [...variableRows, {
				name: "",
				value: ""
			}];
			return variableRows;
		});
		/** Updates an existing variable or creates a new one */
		const handleVariableChange = (name, value, index) => {
			const isNewVariable = index >= __props.environment.variables.length;
			/**
			* Do not allow adding a new variable with an empty name on the last row,
			* we allow it on other rows as it will delete the row
			*/
			if (!name && isNewVariable) return;
			if (index >= __props.environment.variables.length) {
				__props.eventBus.emit("environment:upsert:environment-variable", {
					environmentName: __props.environmentName,
					variable: {
						name,
						value
					},
					collectionType: __props.collectionType
				});
				return;
			}
			__props.eventBus.emit("environment:upsert:environment-variable", {
				environmentName: __props.environmentName,
				variable: {
					name,
					value
				},
				index,
				collectionType: __props.collectionType
			});
		};
		/** Deletes a variable by index */
		const handleVariableDelete = (index) => __props.eventBus.emit("environment:delete:environment-variable", {
			environmentName: __props.environmentName,
			index,
			collectionType: __props.collectionType
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(DataTable_default), {
				class: "group/table data-table h-min flex-1 rounded",
				columns: COLUMNS
			}, {
				default: withCtx(() => [createVNode(unref(DataTableRow_default), { class: "sr-only !block" }, {
					default: withCtx(() => [
						createVNode(unref(DataTableHeader_default), null, {
							default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Name", -1)])]),
							_: 1
						}),
						createVNode(unref(DataTableHeader_default), null, {
							default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Value", -1)])]),
							_: 1
						}),
						createVNode(unref(DataTableHeader_default), null, {
							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Actions", -1)])]),
							_: 1
						})
					]),
					_: 1
				}), (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
					return openBlock(), createBlock(unref(DataTableRow_default), {
						key: index,
						class: "group/row"
					}, {
						default: withCtx(() => [
							createVNode(unref(DataTableCell_default), null, {
								default: withCtx(() => [createVNode(unref(CodeInput_default), {
									"aria-label": "Environment Variable Name",
									disableCloseBrackets: "",
									disableTabIndent: "",
									environment: void 0,
									lineWrapping: "",
									modelValue: row.name,
									placeholder: "Name",
									"onUpdate:modelValue": (name) => handleVariableChange(name, row.value, index)
								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
								_: 2
							}, 1024),
							createVNode(unref(DataTableCell_default), null, {
								default: withCtx(() => [createVNode(unref(CodeInput_default), {
									"aria-label": "Environment Variable Value",
									disableTabIndent: "",
									environment: void 0,
									lineWrapping: "",
									modelValue: row.value,
									placeholder: "Value",
									"onUpdate:modelValue": (value) => handleVariableChange(row.name, value, index)
								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
								_: 2
							}, 1024),
							createVNode(unref(DataTableCell_default), { class: "flex items-center justify-center" }, {
								default: withCtx(() => [index < __props.environment.variables.length ? (openBlock(), createBlock(unref(ScalarButton), {
									key: 0,
									class: "text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex",
									size: "sm",
									variant: "ghost",
									onClick: ($event) => handleVariableDelete(index)
								}, {
									default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
									_: 1
								}, 8, ["onClick"])) : createCommentVNode("", true)]),
								_: 2
							}, 1024)
						]),
						_: 2
					}, 1024);
				}), 128))]),
				_: 1
			});
		};
	}
}), [["__scopeId", "data-v-28c8509c"]]);
//#endregion
//#region src/v2/features/environments/components/Environment.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = { class: "flex items-center gap-1.5" };
var _hoisted_2 = { class: "flex h-6 w-6 items-center justify-center p-1" };
var _hoisted_3 = { class: "px-1 py-0.5 text-sm font-medium" };
var _hoisted_4 = {
	key: 0,
	class: "bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium",
	title: "This is the active environment"
};
var _hoisted_5 = { class: "hidden flex-row items-center gap-1 group-hover:flex" };
//#endregion
//#region src/v2/features/environments/components/Environment.vue
var Environment_default = /* @__PURE__ */ defineComponent({
	__name: "Environment",
	props: {
		environment: {},
		environmentName: {},
		eventBus: {},
		isActive: {
			type: Boolean,
			default: false
		},
		collectionType: {}
	},
	emits: ["edit", "delete"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", { class: normalizeClass(["group relative rounded-lg border transition-colors", __props.isActive ? "border-c-accent bg-c-accent/5" : ""]) }, [createElementVNode("div", { class: normalizeClass(["flex justify-between rounded-t-lg px-1 py-1 text-sm", __props.isActive ? "bg-c-accent/10" : "bg-b-2"]) }, [createElementVNode("div", _hoisted_1$1, [
				createElementVNode("div", _hoisted_2, [createElementVNode("span", {
					class: "h-2.5 w-2.5 rounded-full",
					style: normalizeStyle({ backgroundColor: __props.environment.color })
				}, null, 4)]),
				createElementVNode("span", _hoisted_3, toDisplayString(__props.environmentName), 1),
				__props.isActive ? (openBlock(), createElementBlock("span", _hoisted_4, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "size-1.5 rounded-full bg-current" }, null, -1), createTextVNode(" Active ", -1)])])) : createCommentVNode("", true)
			]), createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIconButton), {
				icon: unref(ScalarIconNotePencil),
				label: "Edit Environment",
				size: "sm",
				onClick: _cache[0] || (_cache[0] = ($event) => emit("edit"))
			}, null, 8, ["icon"]), createVNode(unref(ScalarIconButton), {
				icon: unref(ScalarIconTrash),
				label: "Delete Environment",
				size: "sm",
				onClick: _cache[1] || (_cache[1] = ($event) => emit("delete"))
			}, null, 8, ["icon"])])], 2), createVNode(EnvironmentVariablesTable_default, {
				collectionType: __props.collectionType,
				environment: __props.environment,
				environmentName: __props.environmentName,
				eventBus: __props.eventBus
			}, null, 8, [
				"collectionType",
				"environment",
				"environmentName",
				"eventBus"
			])], 2);
		};
	}
});
//#endregion
//#region src/v2/features/environments/EnvironmentsList.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" };
//#endregion
//#region src/v2/features/environments/EnvironmentsList.vue
var EnvironmentsList_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentsList",
	props: {
		environments: {},
		eventBus: {},
		activeEnvironment: {},
		collectionType: {}
	},
	setup(__props) {
		const createEnvironmentModalState = useModal();
		const deleteEnvironmentModalState = useModal();
		/** Track the currently selected environment for editing or deleting */
		const selectedEnvironmentName = ref(null);
		/** Opens the delete modal */
		const openDeleteModal = (name) => {
			selectedEnvironmentName.value = name;
			deleteEnvironmentModalState.show();
		};
		/** Deletes the selected environment */
		const deleteEnvironment = () => {
			if (!selectedEnvironmentName.value) return;
			__props.eventBus.emit("environment:delete:environment", {
				environmentName: selectedEnvironmentName.value,
				collectionType: __props.collectionType
			});
		};
		/** Opens the upsert modal, leave name empty for add */
		const openUpsertModal = (name) => {
			selectedEnvironmentName.value = name ?? null;
			createEnvironmentModalState.show();
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock(Fragment, null, [
				(openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(__props.environments), ([environmentName, environment]) => {
					return openBlock(), createBlock(Environment_default, {
						key: environmentName,
						collectionType: __props.collectionType,
						environment,
						environmentName,
						eventBus: __props.eventBus,
						isActive: __props.activeEnvironment === environmentName,
						onDelete: () => openDeleteModal(environmentName),
						onEdit: () => openUpsertModal(environmentName)
					}, null, 8, [
						"collectionType",
						"environment",
						"environmentName",
						"eventBus",
						"isActive",
						"onDelete",
						"onEdit"
					]);
				}), 128)),
				createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarButton), {
					class: "hover:bg-b-2 hover:text-c-1 flex items-center gap-2",
					size: "xs",
					variant: "ghost",
					onClick: _cache[0] || (_cache[0] = () => openUpsertModal())
				}, {
					default: withCtx(() => [createVNode(unref(ScalarIconPlus)), _cache[1] || (_cache[1] = createTextVNode(" Add Environment ", -1))]),
					_: 1
				})]),
				createVNode(EnvironmentCreateModal_default, {
					collectionType: __props.collectionType,
					environments: __props.environments,
					eventBus: __props.eventBus,
					selectedEnvironmentName: selectedEnvironmentName.value,
					state: unref(createEnvironmentModalState)
				}, null, 8, [
					"collectionType",
					"environments",
					"eventBus",
					"selectedEnvironmentName",
					"state"
				]),
				createVNode(EnvironmentDeleteModal_default, {
					name: selectedEnvironmentName.value,
					state: unref(deleteEnvironmentModalState),
					onSubmit: deleteEnvironment
				}, null, 8, ["name", "state"])
			], 64);
		};
	}
});
//#endregion
export { EnvironmentsList_default as t };

//# sourceMappingURL=environments-ByLK9lnC.js.map