import { hasRenderableNode } from "../../_utils/vue.js";
import { createVNode, defineComponent, nextTick, ref, watch } from "vue";
import { Carousel } from "antdv-next";
import { LeftOutlined, RightOutlined } from "@antdv-next/icons";
//#region components/sources/components/CarouselCard.tsx
var CarouselCard = /* @__PURE__ */ defineComponent({
	name: "XSourcesCarouselCard",
	props: {
		activeKey: {
			type: [String, Number],
			default: void 0
		},
		prefixCls: {
			type: String,
			required: true
		},
		items: {
			type: Array,
			default: void 0
		},
		classes: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		onClick: {
			type: Function,
			default: void 0
		},
		iconRenderSlot: {
			type: Function,
			default: void 0
		},
		titleRenderSlot: {
			type: Function,
			default: void 0
		},
		descriptionSlot: {
			type: Function,
			default: void 0
		}
	},
	setup(props) {
		const compCls = `${props.prefixCls}-carousel`;
		const slide = ref(0);
		const carouselRef = ref();
		watch([() => props.activeKey, () => props.items], () => {
			nextTick(() => {
				if (carouselRef.value) {
					const current = Math.max(0, props.items?.findIndex(({ key }) => key === props.activeKey) ?? 0);
					slide.value = current;
					carouselRef.value.goTo(current, false);
				}
			});
		}, { immediate: true });
		const handleClick = (item) => {
			if (item.url) window.open(item.url, "_blank", "noopener,noreferrer");
			props.onClick?.(item);
		};
		const renderWithSlot = (slotRender, item, index, originNode) => {
			if (slotRender) return slotRender({
				item,
				index,
				originNode
			});
			return originNode;
		};
		return () => createVNode("div", {
			"style": props.style,
			"class": [`${compCls}-wrapper`, props.classes]
		}, [createVNode("div", { "class": `${compCls}-title` }, [createVNode("div", { "class": `${compCls}-btn-wrapper` }, [createVNode("span", {
			"class": [
				`${compCls}-btn`,
				`${compCls}-left-btn`,
				{ [`${compCls}-btn-disabled`]: slide.value === 0 }
			],
			"onClick": () => carouselRef.value?.prev()
		}, [createVNode(LeftOutlined, null, null)]), createVNode("span", {
			"class": [
				`${compCls}-btn`,
				`${compCls}-right-btn`,
				{ [`${compCls}-btn-disabled`]: slide.value === (props.items?.length || 1) - 1 }
			],
			"onClick": () => carouselRef.value?.next()
		}, [createVNode(RightOutlined, null, null)])]), createVNode("div", { "class": `${compCls}-page` }, [`${slide.value + 1}/${props.items?.length || 1}`])]), createVNode(Carousel, {
			"class": compCls,
			"ref": carouselRef,
			"arrows": false,
			"infinite": false,
			"dots": false,
			"afterChange": (current) => {
				slide.value = current;
			},
			"beforeChange": (_, nextSlide) => {
				slide.value = nextSlide;
			}
		}, { default: () => [props.items?.map((item, index) => (() => {
			const iconNode = renderWithSlot(props.iconRenderSlot, item, index, item.icon);
			const titleNode = renderWithSlot(props.titleRenderSlot, item, index, item.title);
			const descriptionNode = renderWithSlot(props.descriptionSlot, item, index, item.description);
			return createVNode("div", {
				"key": item.key ?? index,
				"class": `${compCls}-item`,
				"onClick": () => handleClick(item)
			}, [createVNode("div", { "class": `${compCls}-item-title-wrapper` }, [hasRenderableNode(iconNode) && createVNode("span", { "class": `${compCls}-item-icon` }, [iconNode]), createVNode("span", { "class": `${compCls}-item-title` }, [titleNode])]), hasRenderableNode(descriptionNode) && createVNode("div", { "class": `${compCls}-item-description` }, [descriptionNode])]);
		})())] })]);
	}
});
//#endregion
export { CarouselCard as default };
