import DataTableCell_default from "../../../../components/DataTable/DataTableCell.vue.js";
import DataTableCheckbox_default from "../../../../components/DataTable/DataTableCheckbox.vue.js";
import DataTableRow_default from "../../../../components/DataTable/DataTableRow.vue.js";
import OAuthScopesAddModal_default from "./OAuthScopesAddModal.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
import { ScalarButton, ScalarIcon, ScalarSearchInput, useModal } from "@scalar/components";
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
//#region src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex h-fit w-full" };
var _hoisted_2 = { class: "flex-1" };
var _hoisted_3 = { class: "flex items-center gap-1.75" };
var _hoisted_4 = {
	class: "grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-scroll",
	style: { gridTemplateColumns: "1fr auto" }
};
var _hoisted_5 = { class: "font-code text-xs" };
var _hoisted_6 = { key: 0 };
var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "OAuthScopesInput",
	props: {
		flowType: {},
		flow: {},
		selectedScopes: {}
	},
	emits: ["update:selectedScopes"],
	setup(__props, { emit: __emit }) {
		const emits = __emit;
		const searchQuery = ref("");
		/** List of all available scopes */
		const scopes = computed(() => Object.entries(__props.flow?.scopes ?? {}).map(([key, val]) => ({
			id: key,
			label: key,
			description: val
		})));
		const filteredScopes = computed(() => {
			if (!searchQuery.value) return scopes.value;
			const regex = new RegExp(searchQuery.value.split("").map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(".*"), "i");
			return scopes.value.filter(({ label, description }) => regex.test(`${label} ${description}`));
		});
		const allScopesSelected = computed(() => __props.selectedScopes.length === Object.keys(__props.flow?.scopes ?? {}).length);
		function setScope(scopeKey, checked) {
			if (checked) return emits("update:selectedScopes", { scopes: Array.from(new Set([...__props.selectedScopes, scopeKey])) });
			emits("update:selectedScopes", { scopes: __props.selectedScopes.filter((scope) => scope !== scopeKey) });
		}
		/** Select all scopes */
		const selectAllScopes = () => emits("update:selectedScopes", { scopes: Object.keys(__props.flow?.scopes ?? {}) });
		/** Deselect all scopes */
		const deselectAllScopes = () => emits("update:selectedScopes", { scopes: [] });
		const addNewScopeModal = useModal();
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(DataTableCell_default), { class: "h-auto !max-h-[initial] min-h-8 items-center" }, {
				default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[7] || (_cache[7] = createElementVNode("div", { class: "text-c-1 h-full items-center" }, null, -1)), createVNode(unref(Disclosure), {
					as: "div",
					class: "bl flex w-full flex-col"
				}, {
					default: withCtx(() => [createVNode(unref(DisclosureButton), { class: normalizeClass(["group/scopes-accordion hover:text-c-1 flex h-auto min-h-8 cursor-pointer items-center gap-1.5 pr-2.25 pl-3 text-left", (__props.selectedScopes.length || 0) > 0 ? "text-c-1" : "text-c-3"]) }, {
						default: withCtx(({ open }) => [createElementVNode("div", _hoisted_2, " Scopes Selected " + toDisplayString(__props.selectedScopes.length || 0) + " / " + toDisplayString(Object.keys(__props.flow?.scopes ?? {}).length || 0), 1), createElementVNode("div", _hoisted_3, [
							createVNode(unref(ScalarButton), {
								class: "pr-0.75 pl-1 transition-none",
								size: "sm",
								variant: "ghost",
								onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(addNewScopeModal).show(), ["stop"]))
							}, {
								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Add Scope ", -1)])]),
								_: 1
							}),
							allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
								key: 0,
								class: "pr-0.75 pl-1 transition-none",
								size: "sm",
								variant: "ghost",
								onClick: withModifiers(deselectAllScopes, ["stop"])
							}, {
								default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Deselect All ", -1)])]),
								_: 1
							})) : createCommentVNode("", true),
							!allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
								key: 1,
								class: "pr-0.75 pl-1 transition-none",
								size: "sm",
								variant: "ghost",
								onClick: withModifiers(selectAllScopes, ["stop"])
							}, {
								default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" Select All ", -1)])]),
								_: 1
							})) : createCommentVNode("", true),
							createVNode(unref(ScalarIcon), {
								class: "text-c-3 group-hover/scopes-accordion:text-c-2",
								icon: open ? "ChevronDown" : "ChevronRight",
								size: "md"
							}, null, 8, ["icon"])
						])]),
						_: 1
					}, 8, ["class"]), createVNode(unref(DisclosurePanel), { as: "template" }, {
						default: withCtx(() => [createElementVNode("div", null, [createVNode(unref(ScalarSearchInput), {
							modelValue: searchQuery.value,
							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
							class: "flex items-center text-xs"
						}, null, 8, ["modelValue"]), createElementVNode("table", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredScopes.value, ({ id, label, description }) => {
							return openBlock(), createBlock(unref(DataTableRow_default), {
								key: id,
								class: "text-c-2",
								onClick: ($event) => setScope(id, !__props.selectedScopes.includes(id))
							}, {
								default: withCtx(() => [createVNode(unref(DataTableCell_default), { class: "no-scrollbar hover:text-c-1 box-border flex !max-h-[initial] w-full cursor-pointer items-center gap-1 overflow-x-scroll px-3 py-1.5 text-nowrap" }, {
									default: withCtx(() => [
										createElementVNode("span", _hoisted_5, toDisplayString(label), 1),
										_cache[6] || (_cache[6] = createElementVNode("span", null, "–", -1)),
										description ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(description), 1)) : createCommentVNode("", true)
									]),
									_: 2
								}, 1024), createVNode(unref(DataTableCheckbox_default), {
									modelValue: __props.selectedScopes.includes(id),
									"onUpdate:modelValue": ($event) => setScope(id, $event)
								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
								_: 2
							}, 1032, ["onClick"]);
						}), 128))])])]),
						_: 1
					})]),
					_: 1
				})]), createVNode(OAuthScopesAddModal_default, {
					scopes: Object.keys(__props.flow.scopes ?? {}),
					state: unref(addNewScopeModal),
					onSubmit: _cache[2] || (_cache[2] = (payload) => emits("update:selectedScopes", {
						scopes: __props.selectedScopes,
						newScopePayload: {
							...payload,
							flowType: __props.flowType
						}
					}))
				}, null, 8, ["scopes", "state"])]),
				_: 1
			});
		};
	}
});
//#endregion
export { OAuthScopesInput_vue_vue_type_script_setup_true_lang_default as default };

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