import { isFeaturedClient } from "../helpers/featured-clients.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
import { Tab } from "@headlessui/vue";
import { ScalarCombobox, ScalarIcon } from "@scalar/components";
import { filterClientsByQuery, findClient } from "@scalar/api-client/blocks/operation-code-sample";
import { freezeElement } from "@scalar/helpers/dom/freeze-element";
//#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "client-libraries-text" };
var _hoisted_2 = {
	"aria-hidden": "true",
	class: "client-libraries-icon__more"
};
var _hoisted_3 = {
	key: 1,
	class: "client-libraries-icon",
	height: "50",
	role: "presentation",
	viewBox: "0 0 50 50",
	width: "50",
	xmlns: "http://www.w3.org/2000/svg"
};
var _hoisted_4 = {
	key: 0,
	class: "client-libraries-text client-libraries-text-more"
};
var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ClientDropdown",
	props: {
		clientOptions: {},
		selectedClient: {},
		featuredClients: {},
		eventBus: {}
	},
	setup(__props) {
		const containerRef = ref();
		/**
		* Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function
		* maps the language key to the icon name.
		*/
		const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
		/** Set custom example, or update the selected HTTP client globally */
		const selectClient = (option) => {
			if (!containerRef.value) return;
			const unfreeze = freezeElement(containerRef.value);
			setTimeout(() => {
				unfreeze();
			}, 300);
			if (option.clientKey !== "custom") __props.eventBus.emit("workspace:update:selected-client", option.id);
		};
		/** Calculates the targetKey from the selected client id */
		const selectedTargetKey = computed(() => __props.selectedClient?.split("/")[0]);
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				ref_key: "containerRef",
				ref: containerRef,
				class: "client-libraries-content"
			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.featuredClients, (featuredClient) => {
				return openBlock(), createBlock(unref(Tab), {
					key: featuredClient.clientKey,
					class: normalizeClass(["client-libraries rendered-code-sdks", { "client-libraries__active": featuredClient.id === __props.selectedClient }])
				}, {
					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`) }, [createVNode(unref(ScalarIcon), {
						class: "client-libraries-icon",
						icon: getIconByLanguageKey(featuredClient.targetKey)
					}, null, 8, ["icon"])], 2), createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)]),
					_: 2
				}, 1032, ["class"]);
			}), 128)), createVNode(unref(ScalarCombobox), {
				filterFn: unref(filterClientsByQuery),
				modelValue: unref(findClient)(__props.clientOptions, __props.selectedClient),
				options: __props.clientOptions,
				placement: "bottom-end",
				teleport: "",
				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
			}, {
				default: withCtx(() => [createElementVNode("button", {
					class: normalizeClass(["client-libraries client-libraries__select", { "client-libraries__active": __props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) }]),
					type: "button"
				}, [
					createElementVNode("div", _hoisted_2, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
						key: 0,
						class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
					}, [selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						class: "client-libraries-icon",
						icon: getIconByLanguageKey(selectedTargetKey.value)
					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
						fill: "currentColor",
						"fill-rule": "nonzero"
					}, [createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })], -1)])]))]),
					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
					_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
				], 2)]),
				_: 1
			}, 8, [
				"filterFn",
				"modelValue",
				"options"
			])], 512);
		};
	}
});
//#endregion
export { ClientDropdown_vue_vue_type_script_setup_true_lang_default as default };

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