import { useSplitResize } from "../../../components/resize/use-split-resize.js";
import { useThreeWayMergeEditor } from "../../editor/hooks/use-three-way-merge-editor.js";
import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toDisplayString, unref, withCtx } from "vue";
import { ScalarButton } from "@scalar/components";
import { useToasts } from "@scalar/use-toasts";
//#region src/v2/features/collection/components/SyncConflictResolutionEditor.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "sync-editor-pane border-c-3 mx-1 mb-1 flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border" };
var _hoisted_2 = { class: "sync-pane-title text-c-2 border-c-3 flex shrink-0 items-center justify-between border-b px-2 py-1 text-[11px]" };
var _hoisted_3 = { class: "flex items-center gap-2" };
var _hoisted_4 = { class: "text-c-2 text-[11px] normal-case" };
var _hoisted_5 = { class: "flex shrink-0 items-center justify-end gap-2" };
var SyncConflictResolutionEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "SyncConflictResolutionEditor",
	props: {
		conflicts: {},
		baseDocument: {},
		resolvedDocument: {}
	},
	emits: ["applyChanges"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const { toast } = useToasts();
		const splitContainerRef = ref();
		const topEditorsRowRef = ref();
		const topPaneSize = ref(50);
		const leftPaneSize = ref(50);
		const { onHorizontalResizeStart, onVerticalResizeStart, stopActiveResize } = useSplitResize({
			horizontalContainerRef: topEditorsRowRef,
			verticalContainerRef: splitContainerRef,
			leftPaneSize,
			topPaneSize,
			horizontalMin: 20,
			horizontalMax: 80,
			verticalMin: 25,
			verticalMax: 75
		});
		const mergeEditor = useThreeWayMergeEditor({
			baseDocument: __props.baseDocument,
			resolvedDocument: __props.resolvedDocument,
			conflicts: __props.conflicts,
			onApplyChanges: (resolvedDoc) => emit("applyChanges", { resolvedDocument: resolvedDoc }),
			onError: (message) => toast(message, "error")
		});
		const conflictsLeft = computed(() => mergeEditor.conflictsLeft.value);
		const topPaneStyle = computed(() => ({ height: `${topPaneSize.value}%` }));
		const leftPaneStyle = computed(() => ({ width: `${leftPaneSize.value}%` }));
		const rightPaneStyle = computed(() => ({ width: `${100 - leftPaneSize.value}%` }));
		const localChangesEditorRef = ref();
		const remoteChangesEditorRef = ref();
		const resultEditorRef = ref();
		onMounted(() => {
			const localEl = localChangesEditorRef.value;
			const remoteEl = remoteChangesEditorRef.value;
			const resultEl = resultEditorRef.value;
			if (localEl && remoteEl && resultEl) mergeEditor.init({
				local: localEl,
				remote: remoteEl,
				result: resultEl
			});
		});
		onUnmounted(() => {
			stopActiveResize();
			mergeEditor.dispose();
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock(Fragment, null, [_cache[7] || (_cache[7] = createElementVNode("p", { class: "text-c-2 text-xs" }, " Resolve conflicts inline in the full document editor. Use the buttons inside the editor for each conflict. ", -1)), createElementVNode("div", {
				ref_key: "splitContainerRef",
				ref: splitContainerRef,
				class: "flex min-h-0 flex-1 flex-col overflow-hidden"
			}, [
				createElementVNode("div", {
					ref_key: "topEditorsRowRef",
					ref: topEditorsRowRef,
					class: "flex min-h-0 gap-1 p-1",
					style: normalizeStyle(topPaneStyle.value)
				}, [
					createElementVNode("div", {
						class: "sync-editor-pane border-c-3 flex min-h-0 flex-col overflow-hidden rounded-lg border",
						style: normalizeStyle(leftPaneStyle.value)
					}, [_cache[2] || (_cache[2] = createElementVNode("div", { class: "sync-pane-title text-c-2 border-c-3 shrink-0 border-b px-2 py-1 text-[11px]" }, " Current ", -1)), createElementVNode("div", {
						ref_key: "localChangesEditorRef",
						ref: localChangesEditorRef,
						class: "min-h-0 flex-1"
					}, null, 512)], 4),
					createElementVNode("button", {
						"aria-label": "Resize current and remote editors",
						class: "resize-handle resize-handle-col",
						type: "button",
						onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onHorizontalResizeStart) && unref(onHorizontalResizeStart)(...args))
					}, null, 32),
					createElementVNode("div", {
						class: "sync-editor-pane border-c-3 flex min-h-0 flex-col overflow-hidden rounded-lg border",
						style: normalizeStyle(rightPaneStyle.value)
					}, [_cache[3] || (_cache[3] = createElementVNode("div", { class: "sync-pane-title text-c-2 border-c-3 shrink-0 border-b px-2 py-1 text-[11px]" }, " Remote ", -1)), createElementVNode("div", {
						ref_key: "remoteChangesEditorRef",
						ref: remoteChangesEditorRef,
						class: "min-h-0 flex-1"
					}, null, 512)], 4)
				], 4),
				createElementVNode("button", {
					"aria-label": "Resize top and result editors",
					class: "resize-handle resize-handle-row",
					type: "button",
					onPointerdown: _cache[1] || (_cache[1] = (...args) => unref(onVerticalResizeStart) && unref(onVerticalResizeStart)(...args))
				}, null, 32),
				createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [_cache[5] || (_cache[5] = createElementVNode("span", null, " Result ", -1)), createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(conflictsLeft.value) + " conflict" + toDisplayString(conflictsLeft.value === 1 ? "" : "s") + " left ", 1), createVNode(unref(ScalarButton), {
					disabled: conflictsLeft.value === 0,
					size: "xs",
					type: "button",
					variant: "outlined",
					onClick: unref(mergeEditor).goToNextConflict
				}, {
					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Next Conflict ", -1)])]),
					_: 1
				}, 8, ["disabled", "onClick"])])]), createElementVNode("div", {
					ref_key: "resultEditorRef",
					ref: resultEditorRef,
					class: "min-h-0 flex-1"
				}, null, 512)]),
				createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarButton), {
					disabled: conflictsLeft.value > 0,
					size: "xs",
					type: "button",
					onClick: unref(mergeEditor).applyResolvedConflicts
				}, {
					default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" Apply changes ", -1)])]),
					_: 1
				}, 8, ["disabled", "onClick"])])
			], 512)], 64);
		};
	}
});
//#endregion
export { SyncConflictResolutionEditor_vue_vue_type_script_setup_true_lang_default as default };

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