import style_default from "./style/index.js";
import { XFileCard } from "./FileCard.js";
import { Fragment, TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
import { useConfig } from "antdv-next/config-provider/context";
import { Button } from "antdv-next";
import { CloseCircleFilled, LeftOutlined, RightOutlined } from "@antdv-next/icons";
import { useResizeObserver } from "@vueuse/core";
//#region components/file-card/List.tsx
function _isSlot(s) {
	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var XFileCardList = /* @__PURE__ */ defineComponent({
	name: "AxFileCardList",
	props: {
		prefixCls: {
			type: String,
			default: "antd-file-card"
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		rootClass: {
			type: String,
			default: ""
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		items: {
			type: Array,
			default: () => []
		},
		size: {
			type: String,
			default: "default"
		},
		removable: {
			type: [Boolean, Function],
			default: false
		},
		onRemove: {
			type: Function,
			default: void 0
		},
		extension: {
			type: [
				String,
				Number,
				Object,
				Array,
				Function
			],
			default: void 0
		},
		overflow: {
			type: String,
			default: void 0
		}
	},
	setup(props, { attrs, slots }) {
		const configCtx = useConfig();
		const [hashId, cssVarCls] = style_default(computed(() => props.prefixCls));
		const compCls = computed(() => `${props.prefixCls}-list`);
		const list = ref([]);
		watch(() => props.items, (items) => {
			const nextItems = items ?? [];
			const nextList = [];
			for (let index = 0; index < nextItems.length; index += 1) {
				const typedItem = nextItems[index];
				nextList.push({
					...typedItem,
					__key: typedItem.key ?? `${typedItem.name}-${index}`
				});
			}
			list.value = nextList;
		}, {
			immediate: true,
			deep: true
		});
		const pingStart = ref(false);
		const pingEnd = ref(false);
		const containerRef = ref();
		const checkPing = () => {
			const node = containerRef.value;
			if (!node) return;
			if (props.overflow === "scrollX") {
				pingStart.value = Math.abs(node.scrollLeft) >= 1;
				pingEnd.value = node.scrollWidth - node.clientWidth - Math.abs(node.scrollLeft) >= 1;
				return;
			}
			if (props.overflow === "scrollY") {
				pingStart.value = node.scrollTop !== 0;
				pingEnd.value = node.scrollHeight - node.clientHeight !== node.scrollTop;
				return;
			}
			pingStart.value = false;
			pingEnd.value = false;
		};
		useResizeObserver(containerRef, () => {
			checkPing();
		});
		watch(() => [props.overflow, list.value.length], () => {
			checkPing();
		}, { immediate: true });
		const onScrollOffset = (offset) => {
			const node = containerRef.value;
			if (!node) return;
			node.scrollTo({
				left: node.scrollLeft + offset * node.clientWidth,
				behavior: "smooth"
			});
		};
		const handleRemove = (item, key) => {
			const nextList = [];
			for (const current of list.value) if (current.__key !== key) nextList.push(current);
			list.value = nextList;
			props.onRemove?.(item);
			checkPing();
		};
		const splitClasses = computed(() => {
			const { root, card, ...other } = props.classes ?? {};
			return {
				root,
				card,
				other
			};
		});
		const splitStyles = computed(() => {
			const { root, card, ...other } = props.styles ?? {};
			return {
				root,
				card,
				other
			};
		});
		return () => {
			let _slot;
			return createVNode("div", { "class": [
				compCls.value,
				props.rootClass,
				splitClasses.value.root,
				hashId.value,
				cssVarCls.value,
				attrs.class,
				props.class,
				{ [`${props.prefixCls}-rtl`]: configCtx.value.direction === "rtl" }
			] }, [createVNode("div", {
				"ref": containerRef,
				"class": [`${compCls.value}-content`, {
					[`${compCls.value}-overflow-${props.overflow}`]: !!props.overflow,
					[`${compCls.value}-overflow-ping-start`]: pingStart.value,
					[`${compCls.value}-overflow-ping-end`]: pingEnd.value,
					[`${compCls.value}-small`]: props.size === "small"
				}],
				"dir": configCtx.value.direction,
				"style": [props.style, splitStyles.value.root],
				"onScroll": checkPing
			}, [
				createVNode(TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot(_slot = list.value.map((item, itemIndex) => {
					const { __key, ...fileItem } = item;
					const cardSlots = {
						description: slots.description ? (slotInfo) => slots.description?.({
							...slotInfo,
							item: fileItem,
							index: itemIndex
						}) : void 0,
						mask: slots.mask ? (slotInfo) => slots.mask?.({
							...slotInfo,
							item: fileItem,
							index: itemIndex
						}) : void 0,
						icon: slots.iconRender ? (slotInfo) => slots.iconRender?.({
							...slotInfo,
							item: fileItem,
							index: itemIndex
						}) : void 0
					};
					return createVNode("div", {
						"key": __key,
						"class": `${compCls.value}-item`
					}, [createVNode(XFileCard, mergeProps(fileItem, {
						"size": props.size,
						"class": [fileItem.class, splitClasses.value.card],
						"style": [fileItem.style, splitStyles.value.card],
						"classes": {
							...splitClasses.value.other,
							...fileItem.classes
						},
						"styles": {
							...splitStyles.value.other,
							...fileItem.styles
						}
					}), cardSlots), (typeof props.removable === "function" ? props.removable(fileItem) : props.removable) ? createVNode("div", {
						"class": `${compCls.value}-remove`,
						"onClick": () => handleRemove(fileItem, __key)
					}, [createVNode(CloseCircleFilled, null, null)]) : null]);
				})) ? _slot : { default: () => [_slot] }),
				props.overflow === "scrollX" ? createVNode(Fragment, null, [createVNode(Button, {
					"size": "small",
					"shape": "circle",
					"class": `${compCls.value}-prev-btn`,
					"icon": createVNode(LeftOutlined, null, null),
					"onClick": () => onScrollOffset(-1)
				}, null), createVNode(Button, {
					"size": "small",
					"shape": "circle",
					"class": `${compCls.value}-next-btn`,
					"icon": createVNode(RightOutlined, null, null),
					"onClick": () => onScrollOffset(1)
				}, null)]) : null,
				slots.extension?.({ items: list.value.map(({ __key, ...item }) => item) }) ?? props.extension
			])]);
		};
	}
});
//#endregion
export { XFileCardList, XFileCardList as default };
