import { useWorkspace } from "../../store/store.js";
import CommandActionForm_default from "../../components/CommandPalette/CommandActionForm.vue.js";
import CommandActionInput_default from "../../components/CommandPalette/CommandActionInput.vue.js";
import EnvironmentColors_default from "./EnvironmentColors.vue.js";
import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
import { ScalarButton, ScalarIcon, ScalarListbox, ScalarModal } from "@scalar/components";
import { useToasts } from "@scalar/use-toasts";
//#region src/views/Environment/EnvironmentModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex items-start gap-2" };
var EnvironmentModal_vue_vue_type_script_setup_true_lang_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 { EnvironmentModal_vue_vue_type_script_setup_true_lang_default as default };

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