import { useWorkspace } from "../../../../store/store.js";
import DataTable_default from "../../../../components/DataTable/DataTable.vue.js";
import DeleteRequestAuthModal_default from "./DeleteRequestAuthModal.vue.js";
import RequestAuthTab_default from "./RequestAuthTab.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
import { useModal } from "@scalar/components";
import { isDefined } from "@scalar/helpers/array/is-defined";
//#region src/views/Request/RequestSection/RequestAuth/RequestAuthDataTable.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["onClick"];
var _hoisted_2 = { class: "relative z-10 font-medium whitespace-nowrap" };
var _hoisted_3 = {
	key: 0,
	class: "absolute inset-x-1 bottom-[var(--scalar-border-width)] left-1/2 z-1 h-px w-full -translate-x-1/2 bg-current"
};
var RequestAuthDataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "RequestAuthDataTable",
	props: {
		collection: {},
		environment: {},
		envVariables: {},
		layout: { default: "client" },
		persistAuth: {
			type: Boolean,
			default: false
		},
		selectedSchemeOptions: { default: () => [] },
		server: {},
		workspace: {}
	},
	emits: ["authorized", "activeSchemes"],
	setup(__props, { emit: __emit }) {
		const emits = __emit;
		const { securitySchemes } = useWorkspace();
		const deleteSchemeModal = useModal();
		const selectedScheme = ref(null);
		/** Add new ref for active tab */
		const activeAuthIndex = ref(0);
		/** Return currently selected schemes including complex auth */
		const activeScheme = computed(() => {
			if (!__props.selectedSchemeOptions || __props.selectedSchemeOptions.length === 0) return [];
			const option = __props.selectedSchemeOptions[activeAuthIndex.value];
			if (!option) return [];
			const keys = option.id.split(",").filter(Boolean);
			return keys.length > 1 ? keys : [option.id];
		});
		/** Emit active schemes */
		watch(activeScheme, (newActiveSchemes) => {
			emits("activeSchemes", newActiveSchemes.map((scheme) => securitySchemes[scheme]).filter(isDefined));
		}, { immediate: true });
		/** Return true if there are any active schemes */
		const hasActiveSchemes = computed(() => activeScheme.value.length > 0);
		watch(() => __props.selectedSchemeOptions, (newOptions) => {
			if (!newOptions || !newOptions[activeAuthIndex.value]) activeAuthIndex.value = Math.max(0, activeAuthIndex.value - 1);
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("form", { onSubmit: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])) }, [
				__props.selectedSchemeOptions.length > 1 ? (openBlock(), createElementBlock("div", {
					key: 0,
					class: normalizeClass(["box-content flex flex-wrap gap-x-2.5 overflow-hidden border border-b-0 px-3", __props.layout === "client" && "border-x-0"])
				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.selectedSchemeOptions, (option, index) => {
					return openBlock(), createElementBlock("div", {
						key: option.id,
						class: normalizeClass(["relative z-1 -mb-[var(--scalar-border-width)] flex h-8 cursor-pointer", [activeAuthIndex.value === index ? "text-c-1" : "text-c-3"]])
					}, [createElementVNode("button", {
						class: "floating-bg relative cursor-pointer border-b-[1px] border-transparent py-1 text-sm font-medium",
						type: "button",
						onClick: ($event) => activeAuthIndex.value = index
					}, [createElementVNode("span", _hoisted_2, toDisplayString(option.label), 1)], 8, _hoisted_1), activeAuthIndex.value === index ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)], 2);
				}), 128))], 2)) : createCommentVNode("", true),
				hasActiveSchemes.value ? (openBlock(), createBlock(unref(DataTable_default), {
					key: 1,
					class: normalizeClass(["flex-1", __props.layout === "reference" && "bg-b-1 rounded-b-lg border border-t-0"]),
					columns: [""],
					presentational: ""
				}, {
					default: withCtx(() => [createVNode(RequestAuthTab_default, {
						collection: __props.collection,
						envVariables: __props.envVariables,
						environment: __props.environment,
						layout: __props.layout,
						persistAuth: __props.persistAuth,
						securitySchemeUids: activeScheme.value,
						server: __props.server,
						workspace: __props.workspace,
						onAuthorized: _cache[0] || (_cache[0] = ($event) => emits("authorized"))
					}, {
						"oauth-actions": withCtx(() => [renderSlot(_ctx.$slots, "oauth-actions", {}, void 0, true)]),
						_: 3
					}, 8, [
						"collection",
						"envVariables",
						"environment",
						"layout",
						"persistAuth",
						"securitySchemeUids",
						"server",
						"workspace"
					])]),
					_: 3
				}, 8, ["class"])) : (openBlock(), createElementBlock("div", {
					key: 2,
					class: normalizeClass(["text-c-3 bg-b-1 flex min-h-16 items-center justify-center border-t px-4 text-sm", __props.layout === "reference" && "min-h-[calc(4rem+0.5px)] rounded-b-lg border"])
				}, " No authentication selected ", 2)),
				createVNode(DeleteRequestAuthModal_default, {
					scheme: selectedScheme.value,
					state: unref(deleteSchemeModal),
					onClose: _cache[1] || (_cache[1] = ($event) => unref(deleteSchemeModal).hide())
				}, null, 8, ["scheme", "state"])
			], 32);
		};
	}
});
//#endregion
export { RequestAuthDataTable_vue_vue_type_script_setup_true_lang_default as default };

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