import CodeInput_default from "../../../components/CodeInput/CodeInput.vue.js";
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, watch, withCtx } from "vue";
import { ScalarButton, ScalarIcon, ScalarMarkdown } from "@scalar/components";
//#region src/views/Collection/components/MarkdownInput.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex h-full w-full flex-col gap-2 pt-8" };
var _hoisted_2 = { class: "flex min-h-8 items-center justify-between gap-2 pl-1.5" };
var _hoisted_3 = { class: "has-[:focus-visible]:bg-b-1 group relative z-1 flex flex-col rounded-lg" };
var _hoisted_4 = { class: "flex h-full min-h-[calc(1rem*4)] flex-col" };
var _hoisted_5 = {
	key: 1,
	class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4"
};
var MarkdownInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "MarkdownInput",
	props: {
		modelValue: {},
		environment: {},
		envVariables: {},
		workspace: {}
	},
	emits: ["update:modelValue"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const mode = ref("preview");
		const codeInputRef = ref(null);
		watch(mode, (newMode) => {
			if (newMode === "edit") nextTick(() => {
				codeInputRef.value?.focus();
			});
		});
		const handleBlur = () => {
			requestAnimationFrame(() => {
				mode.value = "preview";
			});
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [_cache[5] || (_cache[5] = createElementVNode("h3", { class: "font-bold" }, "Description", -1)), 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) => mode.value = "edit")
			}, {
				default: withCtx(() => [createVNode(unref(ScalarIcon), {
					icon: "Pencil",
					size: "sm",
					thickness: "1.5"
				}), _cache[4] || (_cache[4] = createElementVNode("span", null, "Edit", -1))]),
				_: 1
			})) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [mode.value === "preview" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.modelValue && __props.modelValue.trim().length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.modelValue ? (openBlock(), createBlock(unref(ScalarMarkdown), {
				key: 0,
				class: "h-full flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
				value: __props.modelValue,
				withImages: "",
				onDblclick: _cache[1] || (_cache[1] = ($event) => mode.value = "edit")
			}, null, 8, ["value"])) : createCommentVNode("", true), _cache[6] || (_cache[6] = 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_5, [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) => mode.value = "edit")
			}, {
				default: withCtx(() => [createVNode(unref(ScalarIcon), {
					icon: "Pencil",
					size: "sm",
					thickness: "1.5"
				}), _cache[7] || (_cache[7] = createElementVNode("span", null, "Write a description", -1))]),
				_: 1
			})]))], 64)) : createCommentVNode("", true), mode.value === "edit" ? (openBlock(), createBlock(CodeInput_default, {
				key: 1,
				ref_key: "codeInputRef",
				ref: codeInputRef,
				class: "h-full flex-1 border px-0.5 py-0",
				envVariables: __props.envVariables,
				environment: __props.environment,
				modelValue: __props.modelValue,
				workspace: __props.workspace,
				onBlur: handleBlur,
				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
			}, null, 8, [
				"envVariables",
				"environment",
				"modelValue",
				"workspace"
			])) : createCommentVNode("", true)])])]);
		};
	}
});
//#endregion
export { MarkdownInput_vue_vue_type_script_setup_true_lang_default as default };

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