import CommandActionForm_default from "../../../../components/CommandPalette/CommandActionForm.vue.js";
import CommandActionInput_default from "../../../../components/CommandPalette/CommandActionInput.vue.js";
import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, unref, watch, withCtx } from "vue";
import { ScalarModal } from "@scalar/components";
import { useToasts } from "@scalar/use-toasts";
//#region src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex h-8 items-start gap-2 text-sm" };
var _hoisted_2 = { class: "flex h-8 items-start gap-2 text-sm" };
var OAuthScopesAddModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "OAuthScopesAddModal",
	props: {
		state: {},
		scopes: {}
	},
	emits: ["cancel", "submit"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const scopeData = ref({
			name: "",
			description: ""
		});
		const { toast } = useToasts();
		const handleSubmit = () => {
			if (!scopeData.value.name) {
				toast("Please fill in the name before adding a scope.", "error");
				return;
			}
			emit("submit", scopeData.value);
			__props.state.hide();
		};
		watch(() => __props.state.open, (isOpen) => {
			if (isOpen) scopeData.value = {
				name: "",
				description: ""
			};
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarModal), {
				size: "xs",
				state: __props.state,
				title: "Add Scope"
			}, {
				default: withCtx(() => [createVNode(CommandActionForm_default, {
					disabled: !scopeData.value.name || __props.scopes.includes(scopeData.value.name),
					onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel")),
					onSubmit: handleSubmit
				}, {
					submit: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Add Scope", -1)])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[3] || (_cache[3] = createTextVNode(" Name: ", -1)), createVNode(CommandActionInput_default, {
						modelValue: scopeData.value.name,
						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => scopeData.value.name = $event),
						autofocus: "",
						class: "!p-0",
						placeholder: "read:user"
					}, null, 8, ["modelValue"])]), createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createTextVNode(" Description: ", -1)), createVNode(CommandActionInput_default, {
						modelValue: scopeData.value.description,
						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => scopeData.value.description = $event),
						class: "!p-0",
						placeholder: "Read user data"
					}, null, 8, ["modelValue"])])]),
					_: 1
				}, 8, ["disabled"])]),
				_: 1
			}, 8, ["state"]);
		};
	}
});
//#endregion
export { OAuthScopesAddModal_vue_vue_type_script_setup_true_lang_default as default };

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