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 { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
import { ScalarButton, ScalarIcon } from "@scalar/components";
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
//#region src/views/Request/RequestSection/RequestAuth/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 auto-rows-auto",
	style: { gridTemplateColumns: "1fr auto" }
};
var _hoisted_5 = { key: 0 };
var _hoisted_6 = { class: "font-code text-xs" };
var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "OAuthScopesInput",
	props: {
		flow: {},
		updateScheme: { type: Function }
	},
	setup(__props) {
		const scopes = computed(() => Object.entries(__props.flow?.scopes ?? {}).map(([key, val]) => ({
			id: key,
			label: key,
			description: val
		})));
		/** An array of the selected scope ids */
		const selectedScopes = computed(() => __props.flow?.selectedScopes || []);
		function setScope(id, checked) {
			if (checked) __props.updateScheme(`flows.${__props.flow.type}.selectedScopes`, [...selectedScopes.value, id]);
			else __props.updateScheme(`flows.${__props.flow.type}.selectedScopes`, selectedScopes.value.filter((scope) => scope !== id));
		}
		const allScopesSelected = computed(() => __props.flow?.selectedScopes?.length === Object.keys(__props.flow?.scopes ?? {}).length);
		const selectAllScopes = () => {
			__props.updateScheme(`flows.${__props.flow.type}.selectedScopes`, Object.keys(__props.flow?.scopes ?? {}));
		};
		const deselectAllScopes = () => {
			__props.updateScheme(`flows.${__props.flow.type}.selectedScopes`, []);
		};
		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[2] || (_cache[2] = 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.flow?.selectedScopes?.length || 0) > 0 ? "text-c-1" : "text-c-3"]) }, {
						default: withCtx(({ open }) => [createElementVNode("div", _hoisted_2, " Scopes Selected " + toDisplayString(__props.flow?.selectedScopes?.length || 0) + " / " + toDisplayString(Object.keys(__props.flow?.scopes ?? {}).length || 0), 1), createElementVNode("div", _hoisted_3, [
							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[0] || (_cache[0] = [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[1] || (_cache[1] = [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("table", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(scopes.value, ({ id, label, description }) => {
							return openBlock(), createBlock(unref(DataTableRow_default), {
								key: id,
								class: "text-c-2",
								onClick: ($event) => setScope(id, !selectedScopes.value.includes(id))
							}, {
								default: withCtx(() => [createVNode(unref(DataTableCell_default), { class: "hover:text-c-1 box-border !max-h-[initial] w-full cursor-pointer px-3 py-1.5" }, {
									default: withCtx(() => [description ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(label), 1), createTextVNode(" – " + toDisplayString(description), 1)])) : createCommentVNode("", true)]),
									_: 2
								}, 1024), createVNode(unref(DataTableCheckbox_default), {
									modelValue: selectedScopes.value.includes(id),
									"onUpdate:modelValue": () => {}
								}, null, 8, ["modelValue"])]),
								_: 2
							}, 1032, ["onClick"]);
						}), 128))])]),
						_: 1
					})]),
					_: 1
				})])]),
				_: 1
			});
		};
	}
});
//#endregion
export { OAuthScopesInput_vue_vue_type_script_setup_true_lang_default as default };

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