import IntegrationLogo_default from "../../../components/ImportCollection/IntegrationLogo.vue.js";
import Section_default from "./components/Section.vue.js";
import Appearance_default from "./components/Appearance.vue.js";
import { getThemeColors } from "./helpers/get-theme-colors.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton, ScalarIcon, ScalarToggleInput, cva, cx } from "@scalar/components";
import { presets, themeLabels } from "@scalar/themes";
//#region src/v2/features/settings/CollectionSettings.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex flex-col gap-10" };
var _hoisted_2 = { class: "flex flex-col gap-2" };
var _hoisted_3 = { class: "grid grid-cols-2 gap-2" };
var _hoisted_4 = { class: "flex items-center gap-2" };
var _hoisted_5 = { class: "flex items-center gap-1" };
var _hoisted_6 = { class: "grid grid-cols-2 gap-2" };
var _hoisted_7 = { class: "flex items-center gap-2" };
var _hoisted_8 = { class: "flex items-center gap-1" };
var _hoisted_9 = { class: "size-7 rounded-xl" };
var _hoisted_10 = { class: "grid grid-cols-2 gap-2" };
var _hoisted_11 = { class: "flex items-center gap-2" };
var DEFAULT_PROXY_URL = "https://proxy.scalar.com";
var CollectionSettings_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "CollectionSettings",
	props: {
		activeProxyUrl: {},
		customThemes: { default: () => [] },
		activeThemeSlug: {},
		colorMode: {},
		telemetry: { type: Boolean }
	},
	emits: [
		"update:proxyUrl",
		"update:themeSlug",
		"update:colorMode",
		"update:telemetry"
	],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const THEME_IDS = [
			"none",
			"default",
			"alternate",
			"purple",
			"solarized",
			"saturn",
			"kepler"
		];
		const INTEGRATION_THEME_IDS = ["elysiajs", "fastify"];
		const defaultThemes = THEME_IDS.map((themeId) => {
			if (themeId === "none") return {
				slug: themeId,
				name: "None",
				description: "No theme",
				theme: ""
			};
			return presets[themeId];
		});
		const integrationThemes = INTEGRATION_THEME_IDS.map((themeId) => ({
			slug: themeId,
			name: themeLabels[themeId],
			description: themeLabels[themeId],
			theme: ""
		}));
		const customThemeSlugs = computed(() => new Set(__props.customThemes.map((theme) => theme.slug)));
		const buttonStyles = cva({
			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
			variants: { active: {
				true: "bg-primary text-c-1 hover:bg-inherit",
				false: "bg-b-1 hover:bg-b-2"
			} }
		});
		/**
		* Determines if the "None" theme should be selected.
		* This happens when no theme is selected, or when the selected theme does not exist.
		*/
		const isNoneThemeSelected = computed(() => {
			if (__props.activeThemeSlug === void 0 || __props.activeThemeSlug === "none") return true;
			return !(customThemeSlugs.value.has(__props.activeThemeSlug) || defaultThemes.some((theme) => theme.slug === __props.activeThemeSlug) || integrationThemes.some((theme) => theme.slug === __props.activeThemeSlug));
		});
		const isNoneTheme = (themeId) => themeId === "none";
		const isThemeActive = (themeSlug) => {
			return __props.activeThemeSlug === themeSlug || isNoneTheme(themeSlug) && isNoneThemeSelected.value;
		};
		const checkmarkClasses = (isActive) => cx("flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", isActive && "bg-c-accent text-b-1 border-transparent");
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", _hoisted_1, [
				createVNode(Section_default, null, {
					title: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("CORS Proxy", -1)])]),
					description: withCtx(() => [..._cache[5] || (_cache[5] = [
						createTextVNode(" Browsers block cross-origin requests for security. We provide a public proxy to ", -1),
						createElementVNode("a", {
							class: "hover:text-c-1 underline underline-offset-2",
							href: "https://en.wikipedia.org/wiki/Cross-origin_resource_sharing",
							target: "_blank"
						}, "bypass CORS issues", -1),
						createTextVNode(" . Check the ", -1),
						createElementVNode("a", {
							class: "hover:text-c-1 underline underline-offset-2",
							href: "https://github.com/scalar/scalar/tree/main/projects/proxy-scalar-com",
							target: "_blank"
						}, "source code on GitHub", -1),
						createTextVNode(" . ", -1)
					])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton), {
						class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeProxyUrl === DEFAULT_PROXY_URL }))),
						onClick: _cache[0] || (_cache[0] = ($event) => emit("update:proxyUrl", DEFAULT_PROXY_URL))
					}, {
						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeProxyUrl === DEFAULT_PROXY_URL)) }, [__props.activeProxyUrl === DEFAULT_PROXY_URL ? (openBlock(), createBlock(unref(ScalarIcon), {
							key: 0,
							icon: "Checkmark",
							size: "xs",
							thickness: "3.5"
						})) : createCommentVNode("", true)], 2), _cache[6] || (_cache[6] = createTextVNode(" Use proxy.scalar.com (default) ", -1))]),
						_: 1
					}, 8, ["class"]), createVNode(unref(ScalarButton), {
						class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: !__props.activeProxyUrl }))),
						onClick: _cache[1] || (_cache[1] = ($event) => emit("update:proxyUrl", null))
					}, {
						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(checkmarkClasses(!__props.activeProxyUrl)) }, [!__props.activeProxyUrl ? (openBlock(), createBlock(unref(ScalarIcon), {
							key: 0,
							icon: "Checkmark",
							size: "xs",
							thickness: "3.5"
						})) : createCommentVNode("", true)], 2), _cache[7] || (_cache[7] = createTextVNode(" Skip the proxy ", -1))]),
						_: 1
					}, 8, ["class"])])]),
					_: 1
				}),
				createVNode(Section_default, null, {
					title: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("Themes", -1)])]),
					description: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" We've got a whole rainbow of themes for you to play with: ", -1)])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(defaultThemes), (theme) => {
						return openBlock(), createBlock(unref(ScalarButton), {
							key: theme.slug,
							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: isThemeActive(theme.slug) }))),
							onClick: ($event) => emit("update:themeSlug", isNoneTheme(theme.slug) ? void 0 : theme.slug)
						}, {
							default: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(isThemeActive(theme.slug))) }, [isThemeActive(theme.slug) ? (openBlock(), createBlock(unref(ScalarIcon), {
								key: 0,
								icon: "Checkmark",
								size: "xs",
								thickness: "3.5"
							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)]), createElementVNode("div", _hoisted_5, [
								createElementVNode("span", {
									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).light })
								}, null, 4),
								createElementVNode("span", {
									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).dark })
								}, null, 4),
								createElementVNode("span", {
									class: "border-c-3 inline-block h-5 w-5 rounded-full",
									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).accent })
								}, null, 4)
							])]),
							_: 2
						}, 1032, ["class", "onClick"]);
					}), 128))])]),
					_: 1
				}),
				createVNode(Section_default, null, {
					title: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode("Framework Themes", -1)])]),
					description: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(integrationThemes), (theme) => {
						return openBlock(), createBlock(unref(ScalarButton), {
							key: theme.slug,
							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeThemeSlug === theme.slug }))),
							onClick: ($event) => emit("update:themeSlug", theme.slug)
						}, {
							default: withCtx(() => [createElementVNode("div", _hoisted_7, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeThemeSlug === theme.slug)) }, [__props.activeThemeSlug === theme.slug ? (openBlock(), createBlock(unref(ScalarIcon), {
								key: 0,
								icon: "Checkmark",
								size: "xs",
								thickness: "3.5"
							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)]), createElementVNode("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [createVNode(IntegrationLogo_default, { integration: theme.slug }, null, 8, ["integration"])])])]),
							_: 2
						}, 1032, ["class", "onClick"]);
					}), 128))])]),
					_: 1
				}),
				__props.customThemes.length > 0 ? (openBlock(), createBlock(Section_default, { key: 0 }, {
					title: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Custom Themes ", -1)])]),
					description: withCtx(() => [..._cache[13] || (_cache[13] = [createTextVNode(" Team defined themes are available to all workspaces in the team. ", -1)])]),
					default: withCtx(() => [createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.customThemes, (theme) => {
						return openBlock(), createBlock(unref(ScalarButton), {
							key: theme.slug,
							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeThemeSlug === theme.slug }))),
							onClick: ($event) => emit("update:themeSlug", theme.slug)
						}, {
							default: withCtx(() => [createElementVNode("div", _hoisted_11, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeThemeSlug === theme.slug)) }, [__props.activeThemeSlug === theme.slug ? (openBlock(), createBlock(unref(ScalarIcon), {
								key: 0,
								icon: "Checkmark",
								size: "xs",
								thickness: "3.5"
							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)])]),
							_: 2
						}, 1032, ["class", "onClick"]);
					}), 128))])]),
					_: 1
				})) : createCommentVNode("", true),
				createVNode(Section_default, null, {
					title: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode("Appearance", -1)])]),
					description: withCtx(() => [..._cache[15] || (_cache[15] = [createTextVNode(" Choose between light, dark, or system-based appearance for your workspace. ", -1)])]),
					default: withCtx(() => [createVNode(Appearance_default, {
						colorMode: __props.colorMode,
						"onUpdate:colorMode": _cache[2] || (_cache[2] = (value) => emit("update:colorMode", value))
					}, null, 8, ["colorMode"])]),
					_: 1
				}),
				createVNode(Section_default, null, {
					title: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Telemetry", -1)])]),
					description: withCtx(() => [..._cache[17] || (_cache[17] = [createTextVNode(" Help us improve Scalar by sending usage data. ", -1)])]),
					default: withCtx(() => [createVNode(unref(ScalarToggleInput), {
						modelValue: __props.telemetry,
						"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => emit("update:telemetry", value ?? false))
					}, {
						default: withCtx(() => [..._cache[18] || (_cache[18] = [createTextVNode(" Enable telemetry ", -1)])]),
						_: 1
					}, 8, ["modelValue"])]),
					_: 1
				})
			]);
		};
	}
});
//#endregion
export { CollectionSettings_vue_vue_type_script_setup_true_lang_default as default };

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