import { AttachmentContextKey } from "./context.js";
import { Teleport, computed, createVNode, defineComponent, inject, onMounted, ref, watch } from "vue";
//#region components/attachments/DropArea.tsx
var DropArea_default = /* @__PURE__ */ defineComponent({
	name: "XDropArea",
	props: {
		prefixCls: {
			type: String,
			required: true
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		getDropContainer: {
			type: Function,
			default: null
		}
	},
	setup(props, { slots }) {
		const context = inject(AttachmentContextKey, {});
		const container = ref();
		const showArea = ref(false);
		const refreshContainer = () => {
			container.value = props.getDropContainer?.() ?? null;
		};
		onMounted(refreshContainer);
		watch(() => props.getDropContainer, () => {
			refreshContainer();
		});
		const onDragEnter = () => {
			refreshContainer();
			if (container.value) showArea.value = true;
		};
		const onDragOver = (e) => {
			e.preventDefault();
		};
		const onDragLeave = (e) => {
			if (!e.relatedTarget) showArea.value = false;
		};
		const onDrop = (e) => {
			showArea.value = false;
			e.preventDefault();
		};
		watch(() => !!container.value, (hasContainer, _prev, onCleanup) => {
			if (!hasContainer) return;
			document.addEventListener("dragenter", onDragEnter);
			document.addEventListener("dragover", onDragOver);
			document.addEventListener("dragleave", onDragLeave);
			document.addEventListener("drop", onDrop);
			onCleanup(() => {
				document.removeEventListener("dragenter", onDragEnter);
				document.removeEventListener("dragover", onDragOver);
				document.removeEventListener("dragleave", onDragLeave);
				document.removeEventListener("drop", onDrop);
			});
		}, { immediate: true });
		const disabled = computed(() => {
			const disabledValue = context.disabled;
			return typeof disabledValue === "boolean" ? disabledValue : disabledValue?.value ?? false;
		});
		const showDropdown = computed(() => !!props.getDropContainer && !!container.value && !disabled.value);
		const areaCls = computed(() => `${props.prefixCls}-drop-area`);
		return () => {
			if (!showDropdown.value || !container.value) return null;
			return createVNode(Teleport, { "to": container.value }, { default: () => [createVNode("div", {
				"class": [
					areaCls.value,
					props.class,
					{ [`${areaCls.value}-on-body`]: container.value?.tagName === "BODY" }
				],
				"style": [props.style, { display: showArea.value ? "block" : "none" }]
			}, [slots.default?.()])] });
		};
	}
});
//#endregion
export { DropArea_default as default };
