import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
import DataTable_default from "../../../components/data-table/DataTable.vue.js";
import DataTableCell_default from "../../../components/data-table/DataTableCell.vue.js";
import DataTableHeader_default from "../../../components/data-table/DataTableHeader.vue.js";
import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
import { ScalarButton } from "@scalar/components";
import { ScalarIconTrash } from "@scalar/icons";
//#region src/v2/features/environments/components/EnvironmentVariablesTable.vue?vue&type=script&setup=true&lang.ts
var EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_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
			});
		};
	}
});
//#endregion
export { EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default as default };

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