import useXComponentConfig from "../_utils/hooks/use-x-component-config.js";
import { hasRenderableNode } from "../_utils/vue.js";
import style_default from "./style/index.js";
import useActive from "./useActive.js";
import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watch } from "vue";
import { useConfig } from "antdv-next/config-provider/context";
import { Cascader, Flex } from "antdv-next";
//#region components/suggestion/Suggestion.tsx
var XSuggestion = /* @__PURE__ */ defineComponent({
	name: "AxSuggestion",
	inheritAttrs: false,
	props: {
		prefixCls: {
			type: String,
			default: "antd-suggestion"
		},
		rootClass: {
			type: String,
			default: ""
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		open: {
			type: Boolean,
			default: void 0
		},
		items: {
			type: [Array, Function],
			default: () => []
		},
		block: {
			type: Boolean,
			default: false
		}
	},
	emits: [
		"update:open",
		"openChange",
		"select"
	],
	setup(props, { slots, emit }) {
		const attrs = useAttrs();
		const configCtx = useConfig();
		const contextConfig = useXComponentConfig("suggestion");
		const prefixCls = computed(() => configCtx.value.getPrefixCls?.("suggestion", props.prefixCls) ?? props.prefixCls);
		const isRtl = computed(() => configCtx.value.direction === "rtl");
		const [hashId, cssVarCls] = style_default(prefixCls);
		const mergedClasses = computed(() => ({
			...contextConfig.value.classes,
			...props.classes
		}));
		const mergedStyles = computed(() => ({
			...contextConfig.value.styles,
			...props.styles
		}));
		const popupRootClass = computed(() => {
			return [
				mergedClasses.value.popup,
				prefixCls.value,
				props.block ? `${prefixCls.value}-block` : ""
			].filter(Boolean).join(" ");
		});
		const innerOpen = ref(false);
		const mergedOpen = computed(() => props.open ?? innerOpen.value);
		const itemList = ref([]);
		watch(() => props.items, (nextItems) => {
			if (Array.isArray(nextItems)) itemList.value = nextItems;
			else if (typeof nextItems === "function") itemList.value = nextItems();
			else itemList.value = [];
		}, { immediate: true });
		const triggerOpen = (nextOpen) => {
			if (props.open === void 0) innerOpen.value = nextOpen;
			emit("update:open", nextOpen);
			emit("openChange", nextOpen);
		};
		const onClose = () => {
			triggerOpen(false);
		};
		const onTrigger = (nextInfo) => {
			if (nextInfo === false) {
				triggerOpen(false);
				return;
			}
			if (typeof props.items === "function") itemList.value = props.items(nextInfo);
			triggerOpen(true);
		};
		const onInternalChange = (valuePath, selectedOptions) => {
			const path = Array.isArray(valuePath) ? valuePath : [];
			const lastValue = path[path.length - 1];
			const selected = selectedOptions ?? [];
			if (lastValue !== void 0) emit("select", String(lastValue), selected);
			triggerOpen(false);
		};
		const [activePath, onKeyDown] = useActive(itemList, mergedOpen, isRtl, onClose);
		const onInternalOpenChange = (nextOpen) => {
			if (!nextOpen) onClose();
		};
		const domAttrs = computed(() => {
			const { class: _class, style: _style, ...rest } = attrs;
			return rest;
		});
		const renderItemNode = (slotName, info) => {
			const slot = slots[slotName];
			if (slot) return slot(info);
			return info.originNode;
		};
		return () => {
			const childNode = slots.default?.({
				onTrigger,
				onKeyDown,
				open: mergedOpen.value
			});
			return createVNode(Cascader, mergeProps(domAttrs.value, {
				"options": itemList.value,
				"open": mergedOpen.value,
				"value": activePath.value,
				"multiple": false,
				"placement": isRtl.value ? "topRight" : "topLeft",
				"optionRender": (option) => {
					const item = option;
					const labelNode = renderItemNode("labelRender", {
						item,
						originNode: item.label
					});
					const iconNode = renderItemNode("iconRender", {
						item,
						originNode: item.icon
					});
					const extraNode = renderItemNode("extraRender", {
						item,
						originNode: item.extra
					});
					return createVNode(Flex, { "class": `${prefixCls.value}-item` }, { default: () => [
						hasRenderableNode(iconNode) && createVNode("div", { "class": `${prefixCls.value}-item-icon` }, [iconNode]),
						labelNode,
						hasRenderableNode(extraNode) && createVNode("div", { "class": `${prefixCls.value}-item-extra` }, [extraNode])
					] });
				},
				"classes": { popup: { root: popupRootClass.value } },
				"styles": { popup: { root: mergedStyles.value.popup } },
				"style": [
					contextConfig.value.style,
					mergedStyles.value.root,
					props.style
				],
				"onOpenChange": onInternalOpenChange,
				"onChange": onInternalChange,
				"popupMatchSelectWidth": props.block
			}), { default: () => [createVNode("div", {
				"class": [
					prefixCls.value,
					props.rootClass,
					props.class,
					contextConfig.value.classes?.root,
					mergedClasses.value.root,
					hashId.value,
					cssVarCls.value,
					{ [`${prefixCls.value}-block`]: props.block }
				],
				"style": [
					contextConfig.value.style,
					mergedStyles.value.root,
					props.style
				]
			}, [createVNode("div", {
				"class": [
					`${prefixCls.value}-content`,
					contextConfig.value.classes?.content,
					mergedClasses.value.content
				],
				"style": [contextConfig.value.styles?.content, mergedStyles.value.content]
			}, [childNode])])] });
		};
	}
});
//#endregion
export { XSuggestion as default };
