import { r as useWorkspace } from "./store-DpSUVhjp.js";
import { n as CommandActionForm_default, t as CommandActionInput_default } from "./CommandActionInput-TkcAx6E8.js";
import { n as SidebarListElementForm_default } from "./DeleteSidebarListElement-C-p87d03.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, ScalarListbox, ScalarModal } from "@scalar/components";
import { useToasts } from "@scalar/use-toasts";
//#region src/views/Environment/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$2 = ["onClick"];
var _hoisted_2 = ["placeholder"];
//#endregion
//#region src/views/Environment/EnvironmentColors.vue
var EnvironmentColors_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentColors",
	props: {
		activeColor: {},
		selector: {
			type: Boolean,
			default: false
		}
	},
	emits: ["select"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const customColor = ref("");
		const customColorInputRef = ref(null);
		const showCustomInput = ref(false);
		const showSelector = ref(false);
		const colorOptions = [
			{ color: "#FFFFFF" },
			{ color: "#EF0006" },
			{ color: "#EDBE20" },
			{ color: "#069061" },
			{ color: "#FB892C" },
			{ color: "#0082D0" },
			{ color: "#5203D1" },
			{ color: "#FFC0CB" }
		];
		const backgroundStyle = computed(() => {
			return props.activeColor && !colorOptions.some((option) => option.color === props.activeColor) || customColor.value ? `background-color: ${props.activeColor || customColor.value};` : "background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));";
		});
		const handleClick = () => {
			showCustomInput.value = !showCustomInput.value;
			if (props.selector) showSelector.value = false;
			nextTick(() => {
				if (customColorInputRef.value) customColorInputRef.value.focus();
			});
		};
		watch(customColor, (newColor) => {
			if (newColor && !newColor.startsWith("#")) customColor.value = `#${newColor}`;
			showCustomInput.value = true;
		});
		const handleSelectorClick = () => {
			if (props.selector) showSelector.value = !showSelector.value;
		};
		const selectColor = (color) => {
			emit("select", color);
			if (props.selector) showSelector.value = false;
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", null, [!showCustomInput.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.selector && !showSelector.value ? (openBlock(), createElementBlock("div", {
				key: 0,
				class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
				style: normalizeStyle({ backgroundColor: __props.activeColor }),
				onClick: handleSelectorClick
			}, [__props.activeColor ? (openBlock(), createBlock(unref(ScalarIcon), {
				key: 0,
				class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
				icon: "Checkmark",
				size: "xs"
			}, null, 8, ["class"])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), showSelector.value || !props.selector ? (openBlock(), createElementBlock("div", {
				key: 1,
				class: normalizeClass(["color-selector flex flex-row items-center justify-between gap-1.5 space-x-1", props.selector ? "h-4" : "min-h-10 min-w-[296px]"])
			}, [
				(openBlock(), createElementBlock(Fragment, null, renderList(colorOptions, (option) => {
					return createElementVNode("div", {
						key: option.color,
						class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
						style: normalizeStyle({ backgroundColor: option.color }),
						onClick: ($event) => selectColor(option.color)
					}, [__props.activeColor === option.color && !customColor.value ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
						icon: "Checkmark",
						size: "xs"
					}, null, 8, ["class"])) : createCommentVNode("", true)], 14, _hoisted_1$2);
				}), 64)),
				_cache[2] || (_cache[2] = createElementVNode("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
				createElementVNode("label", {
					class: normalizeClass(["z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
					style: normalizeStyle(backgroundStyle.value),
					onClick: handleClick
				}, [!showCustomInput.value && (__props.activeColor === customColor.value || __props.activeColor && !colorOptions.some((option) => option.color === __props.activeColor)) ? (openBlock(), createBlock(unref(ScalarIcon), {
					key: 0,
					class: "text-c-btn",
					icon: "Checkmark",
					size: "xs"
				})) : createCommentVNode("", true)], 6)
			], 2)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), showCustomInput.value ? (openBlock(), createElementBlock("div", {
				key: 1,
				class: normalizeClass(["color-selector flex flex-1 items-center gap-2 rounded", props.selector ? "h-4" : "min-h-10"])
			}, [
				createElementVNode("span", { class: normalizeClass(["absolute rounded-full border border-dashed", props.selector ? "h-4 w-4" : "h-5 w-5"]) }, null, 2),
				createElementVNode("span", {
					class: normalizeClass(["z-[1] rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
					style: normalizeStyle(backgroundStyle.value)
				}, null, 6),
				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: _cache[1] || (_cache[1] = ($event) => selectColor(customColor.value))
				}, null, 40, _hoisted_2), [[vModelText, customColor.value]]),
				createElementVNode("button", {
					class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
					type: "button",
					onClick: handleClick
				}, [createVNode(unref(ScalarIcon), {
					icon: "Checkmark",
					size: "xs"
				})])
			], 2)) : createCommentVNode("", true)]);
		};
	}
});
//#endregion
//#region src/views/Environment/EnvironmentColorModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = { class: "flex flex-col gap-4" };
//#endregion
//#region src/views/Environment/EnvironmentColorModal.vue
var EnvironmentColorModal_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentColorModal",
	props: {
		state: {},
		selectedColor: {}
	},
	emits: ["cancel", "submit"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const newColor = ref("");
		const handleColorSelect = (color) => {
			newColor.value = color;
		};
		const handleSubmit = () => {
			emit("submit", newColor.value);
			newColor.value = "";
		};
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarModal), {
				size: "xxs",
				state: __props.state,
				title: "Edit Environment Color"
			}, {
				default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [createVNode(EnvironmentColors_default, {
					activeColor: newColor.value || props.selectedColor,
					class: "w-full p-1",
					onSelect: handleColorSelect
				}, null, 8, ["activeColor"]), createVNode(SidebarListElementForm_default, {
					onCancel: _cache[0] || (_cache[0] = ($event) => emit("cancel")),
					onSubmit: handleSubmit
				})])]),
				_: 1
			}, 8, ["state"]);
		};
	}
});
//#endregion
//#region src/views/Environment/EnvironmentModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex items-start gap-2" };
//#endregion
//#region src/views/Environment/EnvironmentModal.vue
var EnvironmentModal_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentModal",
	props: {
		state: {},
		activeWorkspaceCollections: {},
		collectionId: {}
	},
	emits: ["cancel", "submit"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const { events } = useWorkspace();
		const environmentName = ref("");
		const selectedColor = ref("#FFFFFF");
		const collections = computed(() => [...props.activeWorkspaceCollections.filter((collection) => collection.info?.title !== "Drafts").map((collection) => ({
			id: collection.uid,
			label: collection.info?.title ?? "Untitled Collection"
		}))]);
		const selectedEnvironment = ref(collections.value.find((collection) => collection.id === props.collectionId));
		const { toast } = useToasts();
		const handleColorSelect = (color) => {
			selectedColor.value = color;
		};
		watch(() => props.state.open, (isOpen) => {
			if (isOpen) {
				environmentName.value = "";
				selectedColor.value = "#FFFFFF";
				if (props.collectionId) selectedEnvironment.value = collections.value.find((collection) => collection.id === props.collectionId);
				else selectedEnvironment.value = void 0;
			}
		});
		const handleSubmit = () => {
			if (!environmentName.value.trim()) {
				toast("Please enter a name before adding an environment.", "error");
				return;
			}
			if (!selectedEnvironment.value?.id) {
				toast("Please select a collection before adding an environment.", "error");
				return;
			}
			emit("submit", {
				name: environmentName.value,
				color: selectedColor.value,
				type: selectedEnvironment.value?.id === "global" ? "global" : "collection",
				collectionId: selectedEnvironment.value?.id !== "global" ? selectedEnvironment.value?.id : void 0
			});
		};
		const redirectToCreateCollection = () => {
			props.state.hide();
			events.commandPalette.emit({ commandName: "Create Collection" });
		};
		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: !selectedEnvironment.value || !environmentName.value.trim(),
					onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel")),
					onSubmit: handleSubmit
				}, {
					options: withCtx(() => [createVNode(unref(ScalarListbox), {
						modelValue: selectedEnvironment.value,
						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedEnvironment.value = $event),
						options: collections.value,
						placeholder: "Select Type"
					}, {
						default: withCtx(() => [collections.value.length > 0 ? (openBlock(), createBlock(unref(ScalarButton), {
							key: 0,
							class: "hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs",
							variant: "outlined"
						}, {
							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(selectedEnvironment.value ? "text-c-1" : "text-c-3") }, toDisplayString(selectedEnvironment.value ? selectedEnvironment.value.label : "Select Collection"), 3), createVNode(unref(ScalarIcon), {
								class: "text-c-3",
								icon: "ChevronDown",
								size: "xs"
							})]),
							_: 1
						})) : (openBlock(), createBlock(unref(ScalarButton), {
							key: 1,
							class: "hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs",
							variant: "outlined",
							onClick: redirectToCreateCollection
						}, {
							default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "text-c-1" }, "Create Collection", -1)])]),
							_: 1
						}))]),
						_: 1
					}, 8, ["modelValue", "options"])]),
					submit: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Add Environment ", -1)])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(EnvironmentColors_default, {
						activeColor: selectedColor.value,
						class: "peer",
						selector: "",
						onSelect: handleColorSelect
					}, null, 8, ["activeColor"]), createVNode(CommandActionInput_default, {
						modelValue: environmentName.value,
						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => environmentName.value = $event),
						class: "-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden",
						placeholder: "Environment name"
					}, null, 8, ["modelValue"])])]),
					_: 1
				}, 8, ["disabled"])]),
				_: 1
			}, 8, ["state"]);
		};
	}
});
//#endregion
export { EnvironmentColorModal_default as n, EnvironmentModal_default as t };

//# sourceMappingURL=EnvironmentModal-DBEJ4Kzj.js.map