import useXComponentConfig from "../_utils/hooks/use-x-component-config.js";
import { AttachmentContextKey } from "./context.js";
import DropArea_default from "./DropArea.js";
import SilentUploader from "./SilentUploader.js";
import FileList_default from "./FileList/index.js";
import PlaceholderUploader from "./PlaceholderUploader.js";
import style_default from "./style/index.js";
import { computed, createVNode, defineComponent, isVNode, provide, ref, watch } from "vue";
import { useConfig } from "antdv-next/config-provider/context";
//#region components/attachments/index.tsx
function _isSlot(s) {
	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var XAttachments = /* @__PURE__ */ defineComponent({
	name: "AxAttachments",
	inheritAttrs: false,
	props: {
		prefixCls: {
			type: String,
			default: "antd-attachment"
		},
		rootClass: {
			type: String,
			default: ""
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		class: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		disabled: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: [
				String,
				Number,
				Object,
				Array,
				Function
			],
			default: void 0
		},
		getDropContainer: {
			type: Function,
			default: null
		},
		items: {
			type: Array,
			default: () => []
		},
		overflow: {
			type: String,
			default: void 0
		},
		accept: {
			type: String,
			default: void 0
		},
		action: {
			type: String,
			default: void 0
		},
		method: {
			type: String,
			default: "POST"
		},
		directory: {
			type: Boolean,
			default: false
		},
		multiple: {
			type: Boolean,
			default: false
		},
		maxCount: {
			type: Number,
			default: void 0
		},
		beforeUpload: {
			type: Function,
			default: void 0
		},
		onRemove: {
			type: Function,
			default: void 0
		},
		customRequest: {
			type: Function,
			default: void 0
		},
		withCredentials: {
			type: Boolean,
			default: false
		},
		openFileDialogOnClick: {
			type: Boolean,
			default: true
		}
	},
	emits: ["update:items", "change"],
	setup(props, { attrs, emit, slots, expose }) {
		const configCtx = useConfig();
		const contextConfig = useXComponentConfig("attachments");
		const containerRef = ref(null);
		const [hashId, cssVarCls] = style_default(computed(() => props.prefixCls));
		const mergedClasses = computed(() => ({
			...contextConfig.value.classes,
			...props.classes
		}));
		const mergedStyles = computed(() => ({
			...contextConfig.value.styles,
			...props.styles
		}));
		provide(AttachmentContextKey, { disabled: computed(() => props.disabled) });
		const fileList = ref([]);
		watch(() => props.items, (items) => {
			fileList.value = items ?? [];
		}, {
			immediate: true,
			deep: true
		});
		const triggerChange = (info) => {
			fileList.value = info.fileList;
			emit("update:items", info.fileList);
			emit("change", info);
		};
		const onUploadChange = (info) => {
			triggerChange({
				file: info.file,
				fileList: info.fileList ?? []
			});
		};
		const uploadProps = computed(() => ({
			accept: props.accept,
			action: props.action,
			method: props.method,
			directory: props.directory,
			multiple: props.multiple,
			maxCount: props.maxCount,
			beforeUpload: props.beforeUpload,
			withCredentials: props.withCredentials,
			openFileDialogOnClick: props.openFileDialogOnClick,
			customRequest: props.customRequest,
			fileList: fileList.value,
			onChange: onUploadChange
		}));
		const onItemRemove = (item) => {
			Promise.resolve(typeof props.onRemove === "function" ? props.onRemove(item) : void 0).then((ret) => {
				if (ret === false) return;
				const nextFileList = [];
				for (const fileItem of fileList.value) if (fileItem.uid !== item.uid) nextFileList.push(fileItem);
				triggerChange({
					file: {
						...item,
						status: "removed"
					},
					fileList: nextFileList
				});
			});
		};
		const getFileInput = () => containerRef.value?.querySelector("input[type=\"file\"]") ?? null;
		expose({
			get nativeElement() {
				return containerRef.value;
			},
			get fileNativeElement() {
				return getFileInput();
			},
			upload(file) {
				const fileInput = getFileInput();
				if (!fileInput) return;
				const dataTransfer = new DataTransfer();
				dataTransfer.items.add(file);
				fileInput.files = dataTransfer.files;
				fileInput.dispatchEvent(new Event("change", { bubbles: true }));
			},
			select(options) {
				const fileInput = getFileInput();
				if (!fileInput) return;
				fileInput.multiple = options?.multiple ?? false;
				const acceptValue = options?.accept || props.accept;
				fileInput.accept = typeof acceptValue === "string" ? acceptValue : acceptValue?.format || "";
				fileInput.click();
			}
		});
		const getPlaceholderNode = (type, options) => {
			const placeholderContent = typeof props.placeholder === "function" ? props.placeholder(type) : props.placeholder;
			return createVNode(PlaceholderUploader, {
				"type": type,
				"placeholder": placeholderContent,
				"upload": uploadProps.value,
				"prefixCls": props.prefixCls,
				"class": mergedClasses.value.placeholder,
				"style": [mergedStyles.value.placeholder, options?.style]
			}, {
				placeholder: slots.placeholder,
				placeholderIcon: slots.placeholderIcon,
				placeholderTitle: slots.placeholderTitle,
				placeholderDescription: slots.placeholderDescription
			});
		};
		const renderWithChildren = () => {
			let _slot;
			return createVNode("div", { "ref": containerRef }, [createVNode(SilentUploader, {
				"upload": uploadProps.value,
				"style": mergedStyles.value.root,
				"class": [props.rootClass, mergedClasses.value.root]
			}, { default: () => [slots.default?.()] }), createVNode(DropArea_default, {
				"getDropContainer": props.getDropContainer,
				"prefixCls": props.prefixCls,
				"style": mergedStyles.value.root,
				"class": [
					hashId.value,
					cssVarCls.value,
					props.rootClass,
					mergedClasses.value.root
				]
			}, _isSlot(_slot = getPlaceholderNode("drop")) ? _slot : { default: () => [_slot] })]);
		};
		const renderNormalMode = () => {
			let _slot2;
			const hasFileList = fileList.value.length > 0;
			return createVNode("div", {
				"ref": containerRef,
				"class": [
					props.prefixCls,
					hashId.value,
					cssVarCls.value,
					{ [`${props.prefixCls}-rtl`]: configCtx.value.direction === "rtl" },
					props.class,
					props.rootClass,
					mergedClasses.value.root,
					attrs.class
				],
				"style": [
					mergedStyles.value.root,
					props.style,
					attrs.style
				],
				"dir": configCtx.value.direction || "ltr"
			}, [
				createVNode(FileList_default, {
					"prefixCls": props.prefixCls,
					"items": fileList.value,
					"onRemove": onItemRemove,
					"overflow": props.overflow,
					"upload": uploadProps.value,
					"classes": mergedClasses.value,
					"style": !hasFileList ? { display: "none" } : void 0,
					"styles": mergedStyles.value
				}, null),
				getPlaceholderNode("inline", hasFileList ? { style: { display: "none" } } : void 0),
				createVNode(DropArea_default, {
					"getDropContainer": props.getDropContainer || (() => containerRef.value),
					"prefixCls": props.prefixCls,
					"class": [hashId.value, cssVarCls.value]
				}, _isSlot(_slot2 = getPlaceholderNode("drop")) ? _slot2 : { default: () => [_slot2] })
			]);
		};
		return () => slots.default ? renderWithChildren() : renderNormalMode();
	}
});
//#endregion
export { XAttachments as default };
