import useXComponentConfig from "../_utils/hooks/use-x-component-config.js";
import think_default from "./icons/think.js";
import style_default from "./style/index.js";
import { Transition, computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watch } from "vue";
import { useConfig } from "antdv-next/config-provider/context";
import { LoadingOutlined, RightOutlined } from "@antdv-next/icons";
//#region components/think/Think.tsx
var XThink = /* @__PURE__ */ defineComponent({
	name: "AxThink",
	inheritAttrs: false,
	props: {
		prefixCls: {
			type: String,
			default: "antd-think"
		},
		rootClass: {
			type: String,
			default: ""
		},
		style: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		class: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		classes: {
			type: Object,
			default: () => ({})
		},
		title: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		icon: {
			type: [
				String,
				Object,
				Array
			],
			default: void 0
		},
		loading: {
			type: [
				Boolean,
				String,
				Object,
				Array
			],
			default: false
		},
		expanded: {
			type: Boolean,
			default: void 0
		},
		defaultExpanded: {
			type: Boolean,
			default: true
		},
		blink: {
			type: Boolean,
			default: false
		}
	},
	emits: ["update:expanded", "expand"],
	setup(props, { slots, emit, expose }) {
		const attrs = useAttrs();
		const configCtx = useConfig();
		const contextConfig = useXComponentConfig("think");
		const rootRef = ref();
		const [hashId, cssVarCls] = style_default(computed(() => props.prefixCls));
		const internalExpanded = ref(props.defaultExpanded);
		const mergedExpanded = computed(() => props.expanded !== void 0 ? props.expanded : internalExpanded.value);
		watch(() => props.expanded, (val) => {
			if (val !== void 0) internalExpanded.value = val;
		});
		function toggleExpanded() {
			const next = !mergedExpanded.value;
			internalExpanded.value = next;
			emit("update:expanded", next);
			emit("expand", next);
		}
		const contentRef = ref();
		function onBeforeEnter(el) {
			el.style.height = "0";
			el.style.opacity = "0";
		}
		function onEnter(el) {
			const htmlEl = el;
			htmlEl.style.height = `${htmlEl.scrollHeight}px`;
			htmlEl.style.opacity = "1";
		}
		function onAfterEnter(el) {
			el.style.height = "";
			el.style.opacity = "";
		}
		function onBeforeLeave(el) {
			el.style.height = `${el.scrollHeight}px`;
			el.style.opacity = "1";
		}
		function onLeave(el) {
			el.offsetHeight;
			el.style.height = "0";
			el.style.opacity = "0";
		}
		function onAfterLeave(el) {
			el.style.height = "";
			el.style.opacity = "";
		}
		const renderIcon = computed(() => {
			if (slots.icon) return slots.icon();
			if (props.loading) {
				if (props.loading === true) return createVNode(LoadingOutlined, null, null);
				return props.loading;
			}
			return props.icon ?? createVNode(think_default, null, null);
		});
		const domAttrs = computed(() => {
			const { class: _class, style: _style, ...rest } = attrs;
			return rest;
		});
		const prefixCls = computed(() => props.prefixCls);
		expose({ get nativeElement() {
			return rootRef.value;
		} });
		return () => createVNode("div", mergeProps({ "ref": rootRef }, domAttrs.value, {
			"class": [
				prefixCls.value,
				contextConfig.value.classes?.root,
				props.rootClass,
				props.classes?.root,
				hashId.value,
				cssVarCls.value,
				attrs.class,
				props.class,
				{ [`${prefixCls.value}-rtl`]: configCtx.value.direction === "rtl" }
			],
			"style": [
				contextConfig.value.style,
				contextConfig.value.styles?.root,
				props.styles?.root,
				attrs.style,
				props.style
			]
		}), [createVNode("div", {
			"class": [
				`${prefixCls.value}-status-wrapper`,
				contextConfig.value.classes?.status,
				props.classes?.status
			],
			"style": [contextConfig.value.styles?.status, props.styles?.status],
			"onClick": toggleExpanded
		}, [
			createVNode("div", { "class": `${prefixCls.value}-status-icon` }, [renderIcon.value]),
			createVNode("div", { "class": [`${prefixCls.value}-status-text`, { [`${prefixCls.value}-motion-blink`]: props.blink }] }, [slots.title?.() ?? props.title]),
			createVNode("span", {
				"class": `${prefixCls.value}-status-down-icon`,
				"style": { transform: mergedExpanded.value ? "rotate(90deg)" : "rotate(0deg)" }
			}, [createVNode(RightOutlined, null, null)])
		]), createVNode(Transition, {
			"name": `${prefixCls.value}-collapse`,
			"onBeforeEnter": onBeforeEnter,
			"onEnter": onEnter,
			"onAfterEnter": onAfterEnter,
			"onBeforeLeave": onBeforeLeave,
			"onLeave": onLeave,
			"onAfterLeave": onAfterLeave
		}, { default: () => [mergedExpanded.value ? createVNode("div", { "ref": contentRef }, [createVNode("div", {
			"class": [
				`${prefixCls.value}-content`,
				contextConfig.value.classes?.content,
				props.classes?.content
			],
			"style": [contextConfig.value.styles?.content, props.styles?.content]
		}, [slots.default?.()])]) : null] })]);
	}
});
//#endregion
export { XThink, XThink as default };
