import { useActiveEntities } from "../../store/active-entities.js";
import { useWorkspace } from "../../store/store.js";
import IconSelector_default from "../../components/IconSelector.vue.js";
import LabelInput_default from "../../components/Form/LabelInput.vue.js";
import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
import { ScalarButton } from "@scalar/components";
import { LibraryIcon } from "@scalar/icons/library";
//#region src/views/Collection/CollectionInfoForm.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["aria-label"];
var _hoisted_2 = { class: "group relative ml-1.25" };
var CollectionInfoForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "CollectionInfoForm",
	setup(__props) {
		const { activeCollection } = useActiveEntities();
		const { collectionMutators } = useWorkspace();
		const icon = computed(() => activeCollection?.value?.["x-scalar-icon"] || "interface-content-folder");
		const updateCollectionIcon = (value) => {
			if (!activeCollection?.value?.uid) return;
			collectionMutators.edit(activeCollection?.value?.uid, "x-scalar-icon", value);
		};
		/**
		* Update info.title
		*/
		const updateCollectionTitle = (value) => {
			if (!activeCollection.value) return;
			collectionMutators.edit(activeCollection.value.uid, "info.title", value);
		};
		/**
		* Alias for the data that we'd like to display.
		*/
		const data = computed(() => {
			return {
				icon: activeCollection?.value?.["x-scalar-icon"],
				title: activeCollection?.value?.info?.title,
				description: activeCollection?.value?.info?.description,
				version: activeCollection?.value?.info?.version
			};
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				"aria-label": `Collection: ${data.value.title}`,
				class: "mx-auto flex h-fit w-full flex-col gap-2 pt-6 pb-3 md:mx-auto md:max-w-[720px]"
			}, [createVNode(IconSelector_default, {
				modelValue: icon.value,
				placement: "bottom-start",
				"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateCollectionIcon(value))
			}, {
				default: withCtx(() => [createVNode(unref(ScalarButton), {
					class: "hover:bg-b-2 aspect-square h-7 w-7 cursor-pointer rounded border border-transparent p-0 hover:border-inherit",
					variant: "ghost"
				}, {
					default: withCtx(() => [createVNode(unref(LibraryIcon), {
						class: "text-c-2 size-5",
						src: icon.value,
						"stroke-width": "2"
					}, null, 8, ["src"])]),
					_: 1
				})]),
				_: 1
			}, 8, ["modelValue"]), createElementVNode("div", _hoisted_2, [createVNode(LabelInput_default, {
				class: "text-xl font-bold",
				inputId: "collectionName",
				placeholder: "Untitled Collection",
				value: data.value.title,
				onUpdateValue: updateCollectionTitle
			}, null, 8, ["value"])])], 8, _hoisted_1);
		};
	}
});
//#endregion
export { CollectionInfoForm_vue_vue_type_script_setup_true_lang_default as default };

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