import useXComponentConfig from "../../_utils/hooks/use-x-component-config.js";
import { AttachmentContextKey } from "../context.js";
import ProgressNode from "./Progress.js";
import { XFileCardList } from "../../file-card/List.js";
import SilentUploader from "../SilentUploader.js";
import { previewImage } from "../util.js";
import { computed, createVNode, defineComponent, inject, ref, watch } from "vue";
import { Button } from "antdv-next";
import { PlusOutlined } from "@antdv-next/icons";
//#region components/attachments/FileList/index.tsx
var mergeClassName = (...names) => names.filter(Boolean).join(" ");
var FileList_default = /* @__PURE__ */ defineComponent({
	name: "XAttachmentsFileList",
	props: {
		prefixCls: {
			type: String,
			required: true
		},
		items: {
			type: Array,
			default: () => []
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		onRemove: {
			type: Function,
			required: true
		},
		overflow: {
			type: String,
			default: void 0
		},
		upload: {
			type: Object,
			default: () => ({})
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		styles: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props) {
		const context = inject(AttachmentContextKey, {});
		const contextConfig = useXComponentConfig("attachments");
		const list = ref([]);
		const listCls = computed(() => `${props.prefixCls}-list`);
		const buildVersion = ref(0);
		const mergedClasses = computed(() => ({
			...contextConfig.value.classes,
			...props.classes
		}));
		const mergedStyles = computed(() => ({
			...contextConfig.value.styles,
			...props.styles
		}));
		const getDescription = (item) => {
			if (item.description) return item.description;
			if (item.status === "uploading") return `${item.percent ?? 0}%`;
			if (item.status === "error") return typeof item.response === "string" ? item.response : "error";
			return "";
		};
		const rebuildList = async (items) => {
			const currentBuild = ++buildVersion.value;
			const nextList = [];
			for (const [index, item] of items.entries()) {
				const desc = getDescription(item);
				let previewImg;
				if (item.originFileObj) previewImg = await previewImage(item.originFileObj);
				const previewUrl = item.thumbUrl || item.url || previewImg;
				const cardCls = `${props.prefixCls}-list-card`;
				const status = item.status;
				let imageProps;
				if (previewUrl && (status === "uploading" || status === "error")) {
					const percent = item.percent;
					imageProps = { preview: {
						src: previewUrl,
						mask: createVNode("div", { "class": `${cardCls}-file-img-mask` }, [status === "uploading" && percent !== void 0 ? createVNode(ProgressNode, {
							"percent": percent,
							"prefixCls": cardCls
						}, null) : null, status === "error" ? createVNode("div", { "class": `${cardCls}-desc` }, [createVNode("div", { "class": `${cardCls}-ellipsis` }, [desc])]) : null])
					} };
				}
				const { cardType, type: _type, ...restItem } = item;
				nextList.push({
					key: item.uid || index,
					description: desc,
					src: previewUrl,
					classes: {
						file: mergeClassName(`${cardCls}-status-${status}`, mergedClasses.value.file),
						description: mergeClassName(`${cardCls}-desc`, mergedClasses.value.description)
					},
					byte: item.size,
					...restItem,
					type: cardType,
					size: void 0,
					imageProps
				});
			}
			if (currentBuild === buildVersion.value) list.value = nextList;
		};
		watch(() => props.items, (items) => {
			rebuildList(items ?? []);
		}, {
			immediate: true,
			deep: true
		});
		const handleRemove = (item) => {
			const index = list.value.findIndex((card) => card.key === item.key);
			if (index >= 0 && props.items[index]) props.onRemove(props.items[index]);
		};
		const disabled = computed(() => {
			const disabledValue = context.disabled;
			return typeof disabledValue === "boolean" ? disabledValue : disabledValue?.value ?? false;
		});
		const showExtension = computed(() => !disabled.value && (typeof props.upload.maxCount === "undefined" || props.upload.maxCount > props.items.length));
		const FileCardListAny = XFileCardList;
		return () => createVNode(FileCardListAny, {
			"items": list.value,
			"class": [`${props.prefixCls}-list`, props.class],
			"classes": {
				root: mergedClasses.value.list,
				card: mergedClasses.value.card,
				file: mergedClasses.value.file,
				description: mergedClasses.value.description,
				icon: mergedClasses.value.icon,
				name: mergedClasses.value.name
			},
			"styles": {
				root: mergedStyles.value.list,
				card: mergedStyles.value.card,
				file: mergedStyles.value.file,
				description: mergedStyles.value.description,
				icon: mergedStyles.value.icon,
				name: mergedStyles.value.name
			},
			"style": props.style,
			"removable": !disabled.value,
			"onRemove": handleRemove,
			"overflow": props.overflow,
			"extension": createVNode(SilentUploader, {
				"visible": showExtension.value,
				"upload": props.upload
			}, { default: () => [createVNode(Button, {
				"class": [mergedClasses.value.upload, `${listCls.value}-upload-btn`],
				"style": mergedStyles.value.upload,
				"type": "dashed"
			}, { default: () => [createVNode(PlusOutlined, { "class": `${listCls.value}-upload-btn-icon` }, null)] })] })
		}, null);
	}
});
//#endregion
export { FileList_default as default };
