import localeValues from "../locale/en_US.js";
import useLocale from "../locale/useLocale.js";
import { Fragment, createVNode, defineComponent, nextTick, onMounted, ref, watch } from "vue";
import { Button, Flex } from "antdv-next";
//#region components/bubble/EditableContent.tsx
function isBlock(el) {
	const display = getComputedStyle(el).display;
	return display === "block" || display === "flex" || display === "list-item" || display === "table";
}
function getPlainTextWithFormat(dom) {
	const lines = [""];
	const walker = document.createTreeWalker(dom, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
	while (walker.nextNode()) {
		const node = walker.currentNode;
		if (node.nodeType === Node.TEXT_NODE) {
			lines[lines.length - 1] += node.textContent ?? "";
			continue;
		}
		if (node.tagName === "BR" && node.parentNode?.childElementCount === 1) continue;
		if (node.tagName === "BR" || isBlock(node)) lines.push("");
	}
	return lines.join("\n");
}
var EditableContent = /* @__PURE__ */ defineComponent({
	name: "XBubbleEditableContent",
	props: {
		content: {
			type: String,
			required: true
		},
		prefixCls: {
			type: String,
			required: true
		},
		okText: {
			type: [String, Object],
			default: void 0
		},
		cancelText: {
			type: [String, Object],
			default: void 0
		},
		onEditConfirm: {
			type: Function,
			default: void 0
		},
		onEditCancel: {
			type: Function,
			default: void 0
		}
	},
	setup(props) {
		const editableRef = ref();
		const [contextLocale] = useLocale("Bubble", localeValues.Bubble);
		const placeCaretAtEnd = () => {
			const editable = editableRef.value;
			if (!editable || typeof window === "undefined") return;
			const selection = window.getSelection();
			if (!selection) return;
			const range = document.createRange();
			range.selectNodeContents(editable);
			range.collapse(false);
			selection.removeAllRanges();
			selection.addRange(range);
		};
		watch(() => props.content, (value) => {
			if (!editableRef.value) return;
			editableRef.value.textContent = value;
		});
		onMounted(() => {
			if (!editableRef.value) return;
			editableRef.value.textContent = props.content;
			nextTick(() => {
				editableRef.value?.focus();
				placeCaretAtEnd();
			});
		});
		const confirm = () => {
			const editable = editableRef.value;
			props.onEditConfirm?.(editable ? getPlainTextWithFormat(editable) : props.content);
		};
		const cancel = () => {
			props.onEditCancel?.();
		};
		return () => createVNode(Fragment, null, [createVNode("div", {
			"ref": editableRef,
			"contenteditable": true
		}, null), createVNode(Flex, {
			"class": `${props.prefixCls}-editing-opts`,
			"gap": 8
		}, { default: () => [createVNode(Button, {
			"type": "primary",
			"shape": "round",
			"size": "small",
			"onClick": confirm
		}, { default: () => [props.okText ?? contextLocale.value.editableOk] }), createVNode(Button, {
			"type": "text",
			"shape": "round",
			"size": "small",
			"onClick": cancel
		}, { default: () => [props.cancelText ?? contextLocale.value.editableCancel] })] })]);
	}
});
//#endregion
export { EditableContent };
