import { useWorkspace } from "../../../store/store.js";
import DataTable_default from "../../../components/DataTable/DataTable.vue.js";
import DataTableRow_default from "../../../components/DataTable/DataTableRow.vue.js";
import ViewLayoutCollapse_default from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import CodeSnippet_default from "../../Components/CodeSnippet/CodeSnippet.vue.js";
import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton, ScalarCodeBlock, ScalarCombobox, ScalarIcon } from "@scalar/components";
import { snippetz } from "@scalar/snippetz";
//#region src/views/Request/RequestSection/RequestCodeExample.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "w-full" };
var _hoisted_2 = { class: "flex flex-1" };
var _hoisted_3 = { class: "bg-b-1 flex items-center justify-center overflow-hidden border-t" };
var RequestCodeExample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "RequestCodeExample",
	props: {
		collection: {},
		example: {},
		operation: {},
		server: {},
		workspace: {},
		environment: {}
	},
	setup(__props) {
		const { securitySchemes, workspaceMutators } = useWorkspace();
		const localSelectedClient = computed(() => {
			if (localSelectedClientState.value.targetKey === "custom") {
				if (codeSamples.value?.some((sample) => sample.lang === localSelectedClientState.value.clientKey)) return localSelectedClientState.value;
			}
			return {
				targetKey: __props.workspace.selectedHttpClient?.targetKey ?? "js",
				clientKey: __props.workspace.selectedHttpClient?.clientKey ?? "fetch"
			};
		});
		const codeSamples = computed(() => __props.operation["x-codeSamples"] || __props.operation["x-code-samples"] || __props.operation["x-custom-examples"]);
		const localSelectedClientState = ref(codeSamples.value?.length ? {
			targetKey: "custom",
			clientKey: codeSamples.value[0]?.lang
		} : {
			targetKey: __props.workspace.selectedHttpClient?.targetKey ?? "js",
			clientKey: __props.workspace.selectedHttpClient?.clientKey ?? "fetch"
		});
		/**
		* Returns selected security schemes for the request
		*/
		const selectedSecuritySchemes = computed(() => {
			return (__props.operation.selectedSecuritySchemeUids || __props.collection.selectedSecuritySchemeUids || []).flat().map((uid) => securitySchemes[uid]).filter((scheme) => Boolean(scheme));
		});
		/**
		* Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop
		**/
		const snippets = computed(() => {
			const dict = {};
			const builtInOptions = snippetz().clients().map((group) => ({
				label: group.title,
				options: group.clients.map((plugin) => {
					dict[`${group.key},${plugin.client}`] = plugin.title;
					return {
						id: `${group.key},${plugin.client}`,
						label: plugin.title
					};
				})
			}));
			const customExamples = (__props.operation["x-codeSamples"] || __props.operation["x-code-samples"] || __props.operation["x-custom-examples"] || []).map((sample) => ({
				id: `custom,${sample.lang}`,
				label: sample.label || sample.lang
			}));
			const options = customExamples.length > 0 ? [{
				id: "customExamples",
				label: "Code Examples",
				options: customExamples.map((customExample) => ({
					id: customExample.id,
					label: customExample.label ?? customExample.id
				}))
			}, ...builtInOptions] : builtInOptions;
			customExamples.forEach((sample) => {
				dict[sample.id] = sample.label ?? sample.id;
			});
			return {
				options,
				dict
			};
		});
		/** The currently selected plugin */
		const selectedPlugin = computed(() => {
			const client = localSelectedClient.value;
			if (client.targetKey === "custom") {
				const id = `custom,${client.clientKey}`;
				return {
					id,
					label: snippets.value.dict[id] ?? "Unknown"
				};
			}
			const id = `${client.targetKey},${client.clientKey}`;
			return {
				id,
				label: snippets.value.dict[id] ?? "Unknown"
			};
		});
		/** The currently selected target */
		const selectedTarget = computed(() => localSelectedClient.value.targetKey);
		/** The currently selected client */
		const selectedClient = computed(() => localSelectedClient.value.clientKey);
		/** Update the selection when a new client is picked */
		const selectClient = (value) => {
			if (!value) return;
			const { id } = value;
			const [target, client] = id.split(",");
			if (!target || !client) return;
			localSelectedClientState.value = {
				targetKey: target,
				clientKey: client
			};
			if (target !== "custom") workspaceMutators.edit(__props.workspace.uid, "selectedHttpClient", {
				targetKey: target,
				clientKey: client
			});
		};
		/** Get the code sample content for a custom example */
		const customCodeContent = computed(() => {
			if (!selectedPlugin.value.id.startsWith("custom,")) return;
			const lang = selectedPlugin.value.id.split(",")[1];
			return (codeSamples.value?.find((s) => s.lang === lang))?.source;
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(ViewLayoutCollapse_default, {
				class: "group/preview w-full border-b-0",
				defaultOpen: false
			}, {
				title: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Code Snippet", -1)])]),
				actions: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarCombobox), {
					modelValue: selectedPlugin.value,
					options: snippets.value.options,
					placement: "bottom-end",
					"onUpdate:modelValue": selectClient
				}, {
					default: withCtx(() => [createVNode(unref(ScalarButton), {
						class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal",
						variant: "ghost"
					}, {
						default: withCtx(() => [createElementVNode("span", null, toDisplayString(selectedPlugin.value?.label), 1), createVNode(unref(ScalarIcon), {
							icon: "ChevronDown",
							size: "md"
						})]),
						_: 1
					})]),
					_: 1
				}, 8, ["modelValue", "options"])])]),
				default: withCtx(() => [createVNode(DataTable_default, {
					columns: [""],
					presentational: ""
				}, {
					default: withCtx(() => [createVNode(DataTableRow_default, null, {
						default: withCtx(() => [createElementVNode("div", _hoisted_3, [customCodeContent.value ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
							key: 0,
							content: customCodeContent.value,
							lang: selectedPlugin.value.id.split(",")[1] ?? "plaintext"
						}, null, 8, ["content", "lang"])) : (openBlock(), createBlock(unref(CodeSnippet_default), {
							key: 1,
							client: selectedClient.value,
							example: __props.example,
							operation: __props.operation,
							securitySchemes: selectedSecuritySchemes.value,
							server: __props.server,
							target: selectedTarget.value,
							environment: __props.environment
						}, null, 8, [
							"client",
							"example",
							"operation",
							"securitySchemes",
							"server",
							"target",
							"environment"
						]))])]),
						_: 1
					})]),
					_: 1
				})]),
				_: 1
			})]);
		};
	}
});
//#endregion
export { RequestCodeExample_vue_vue_type_script_setup_true_lang_default as default };

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