import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
import DeleteSidebarListElement_default from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
import Section_default from "../../settings/components/Section.vue.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
import { ScalarButton, ScalarMarkdown, ScalarModal, ScalarToggle, useModal } from "@scalar/components";
import { ScalarIconPencil } from "@scalar/icons";
import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
//#region src/v2/features/collection/components/Overview.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex flex-col gap-8" };
var _hoisted_2 = { class: "has-focus-visible:bg-b-1 group rounded-lg" };
var _hoisted_3 = {
	key: 1,
	class: "text-c-3 flex items-center justify-center rounded-lg border p-4"
};
var _hoisted_4 = { class: "flex items-center justify-between gap-4 rounded-lg p-4" };
var _hoisted_5 = { class: "min-w-0 flex-1" };
var _hoisted_6 = { class: "bg-b-2 flex items-center justify-between gap-4 rounded-lg border border-(--scalar-background-3) p-4 text-sm" };
var Overview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "Overview",
	props: {
		documentSlug: {},
		document: {},
		eventBus: {},
		layout: {},
		path: {},
		method: {},
		exampleName: {},
		environment: {},
		securitySchemes: {},
		workspaceStore: {},
		activeWorkspace: {},
		plugins: {},
		customThemes: {},
		currentTheme: {},
		isDarkMode: { type: Boolean },
		fetchRegistryDocument: { type: Function },
		telemetry: { type: Boolean },
		onUpdateTelemetry: { type: Function },
		collectionType: {}
	},
	setup(__props) {
		const operationLabel = computed(() => {
			if (!__props.method || !__props.path) return "this operation";
			return `${typeof __props.method === "string" ? __props.method.toUpperCase() : __props.method} ${__props.path}`;
		});
		const description = computed(() => {
			if (__props.collectionType === "operation") {
				if (!__props.path || !__props.method || !isHttpMethod(__props.method)) return "";
				return __props.document?.paths?.[__props.path]?.[__props.method]?.description ?? "";
			}
			return __props.document?.info?.description ?? "";
		});
		const deprecated = computed(() => {
			if (__props.collectionType !== "operation" || !__props.path || !isHttpMethod(__props.method)) return false;
			return (__props.document?.paths?.[__props.path]?.[__props.method])?.deprecated ?? false;
		});
		const mode = ref("preview");
		const codeInputRef = useTemplateRef("codeInputRef");
		/**
		* Switch between edit and preview modes.
		* When switching to edit mode, focus the input after the DOM updates.
		*/
		const switchMode = async (newMode) => {
			mode.value = newMode;
			if (newMode === "edit") {
				await nextTick();
				codeInputRef.value?.focus();
			}
		};
		/**
		* Updates the description of the collection
		* @param payload - The new description
		* @returns void
		*/
		const handleDescriptionUpdate = async (payload) => {
			await switchMode("preview");
			/** If the collection type is a document, update the description of the document */
			if (__props.collectionType === "document") return __props.eventBus.emit("document:update:info", { description: payload });
			/** If the collection type is an operation, update the description of the operation */
			if (__props.collectionType === "operation") {
				if (!__props.path || !__props.method) {
					console.error("Invalid path or method", {
						path: __props.path,
						method: __props.method
					});
					return;
				}
				return __props.eventBus.emit("operation:update:meta", {
					meta: {
						path: __props.path,
						method: __props.method
					},
					payload: { description: payload }
				});
			}
			console.error("Invalid collection type", { collectionType: __props.collectionType });
		};
		const handleDeprecatedChange = (value) => {
			if (__props.collectionType !== "operation" || !__props.path || !__props.method) return;
			__props.eventBus.emit("operation:update:meta", {
				meta: {
					path: __props.path,
					method: __props.method
				},
				payload: { deprecated: value }
			});
		};
		const deleteOperationModal = useModal();
		const handleDeleteOperation = () => {
			if (__props.collectionType !== "operation" || !__props.path || !__props.method || !__props.documentSlug) return;
			__props.eventBus.emit("operation:delete:operation", {
				documentName: __props.documentSlug,
				meta: {
					path: __props.path,
					method: __props.method
				}
			});
			deleteOperationModal.hide();
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [createVNode(Section_default, null, {
				title: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Description", -1)])]),
				actions: withCtx(() => [mode.value === "preview" ? (openBlock(), createBlock(unref(ScalarButton), {
					key: 0,
					class: "text-c-2 hover:text-c-1 flex items-center gap-2",
					size: "sm",
					type: "button",
					variant: "outlined",
					onClick: _cache[0] || (_cache[0] = ($event) => switchMode("edit"))
				}, {
					default: withCtx(() => [createVNode(unref(ScalarIconPencil), {
						size: "sm",
						thickness: "1.5"
					}), _cache[6] || (_cache[6] = createElementVNode("span", null, "Edit", -1))]),
					_: 1
				})) : createCommentVNode("", true)]),
				default: withCtx(() => [createElementVNode("div", _hoisted_2, [mode.value === "preview" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [description.value.trim().length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(ScalarMarkdown), {
					class: "flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
					value: description.value,
					withImages: "",
					onDblclick: _cache[1] || (_cache[1] = ($event) => switchMode("edit"))
				}, null, 8, ["value"]), _cache[7] || (_cache[7] = createElementVNode("div", { class: "brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden" }, null, -1))], 64)) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ScalarButton), {
					class: "hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2",
					size: "sm",
					variant: "ghost",
					onClick: _cache[2] || (_cache[2] = ($event) => switchMode("edit"))
				}, {
					default: withCtx(() => [createVNode(unref(ScalarIconPencil), {
						size: "sm",
						thickness: "1.5"
					}), _cache[8] || (_cache[8] = createElementVNode("span", null, "Write a description", -1))]),
					_: 1
				})]))], 64)) : (openBlock(), createBlock(unref(CodeInput_default), {
					key: 1,
					ref_key: "codeInputRef",
					ref: codeInputRef,
					class: "border px-0.5 py-0",
					environment: void 0,
					layout: __props.layout,
					modelValue: description.value,
					onBlur: handleDescriptionUpdate
				}, null, 8, ["layout", "modelValue"]))])]),
				_: 1
			}), __props.collectionType === "operation" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(Section_default, null, {
				title: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("Status", -1)])]),
				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["rounded-lg border text-sm transition-colors", deprecated.value ? "border-(--scalar-color-alert) bg-(--scalar-background-alert)" : "bg-b-2 border-(--scalar-background-3)"]) }, [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createElementVNode("h4", { class: normalizeClass(["font-medium", deprecated.value ? "text-(--scalar-color-alert)" : "text-c-1"]) }, " Deprecated ", 2), _cache[10] || (_cache[10] = createElementVNode("p", { class: "text-c-2 mt-1.5" }, " Mark this operation as deprecated. Consumers SHOULD refrain from using it. ", -1))]), createVNode(unref(ScalarToggle), {
					class: "shrink-0",
					modelValue: deprecated.value,
					"onUpdate:modelValue": handleDeprecatedChange
				}, null, 8, ["modelValue"])])], 2)]),
				_: 1
			}), createVNode(Section_default, null, {
				title: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode("Danger Zone", -1)])]),
				default: withCtx(() => [createElementVNode("div", _hoisted_6, [_cache[13] || (_cache[13] = createElementVNode("div", { class: "min-w-0 flex-1" }, [createElementVNode("h4", { class: "text-c-1 font-medium" }, "Delete Operation"), createElementVNode("p", { class: "text-c-2 mt-1.5" }, " Be careful, my friend. Once deleted, there is no way to recover the operation. ")], -1)), createVNode(unref(ScalarButton), {
					class: "shrink-0",
					size: "sm",
					variant: "danger",
					onClick: _cache[3] || (_cache[3] = ($event) => unref(deleteOperationModal).show())
				}, {
					default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Delete Operation ", -1)])]),
					_: 1
				})])]),
				_: 1
			})], 64)) : createCommentVNode("", true)]), createVNode(unref(ScalarModal), {
				size: "xxs",
				state: unref(deleteOperationModal),
				title: `Delete ${operationLabel.value}`
			}, {
				default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
					variableName: operationLabel.value,
					warningMessage: "This action cannot be undone.",
					onClose: _cache[4] || (_cache[4] = ($event) => unref(deleteOperationModal).hide()),
					onDelete: handleDeleteOperation
				}, null, 8, ["variableName"])]),
				_: 1
			}, 8, ["state", "title"])], 64);
		};
	}
});
//#endregion
export { Overview_vue_vue_type_script_setup_true_lang_default as default };

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