import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { CardWrapper } from "./components/CardWrapper.js";
import { PanelWrapper } from "./components/PanelWrapper.js";
import { useMultilevelCardExpand } from "./hooks/useMultilevelCardExpand.js";
import { useMultilevelCardHover } from "./hooks/useMultilevelCardHover.js";
import React, { useEffect } from "react";
import classNames from "classnames";
import ReactDOM from "react-dom";
import "./MultilevelCard.less";
//#region src/components/PisellCards/components/MultilevelCard/MultilevelCard.tsx
/**
* MultilevelCard 组件
* 多层级卡片组件，支持点击或 hover 展开次级面板
*
* @example
* ```tsx
* <MultilevelCard
*   card={<TextCard text="分类1" />}
*   panel={<div>次级内容</div>}
*   trigger="click"
* />
* ```
*/
const MultilevelCard = (props) => {
	const { card, panel, dataSource, active, disabled, loading, children, onClick, trigger = "click", hoverDelay, panelWidthMode = "full", panelWidth, panelStyle, panelClassName, panelContainer, animation = true, animationDuration = 300, onExpandChange, onPanelMount, onPanelUnmount, className, style, __designMode } = props;
	const { expanded, setExpanded } = useMultilevelCardExpand({
		active,
		trigger,
		onExpandChange
	});
	const { onMouseEnter, onMouseLeave } = useMultilevelCardHover({
		enabled: trigger === "hover",
		delay: hoverDelay,
		onExpandChange: setExpanded
	});
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const renderPanel = () => {
		if (!panel || !expanded) return null;
		const panelElement = /* @__PURE__ */ React.createElement(PanelWrapper, {
			visible: expanded,
			widthMode: panelWidthMode,
			width: panelWidth,
			style: panelStyle,
			className: panelClassName,
			animation,
			animationDuration,
			onMount: onPanelMount,
			onUnmount: onPanelUnmount,
			onMouseEnter: trigger === "hover" ? onMouseEnter : void 0,
			onMouseLeave: trigger === "hover" ? onMouseLeave : void 0,
			props
		}, panel === null || panel === void 0 ? void 0 : panel(props));
		if ((panelContainer === null || panelContainer === void 0 ? void 0 : panelContainer(props)) && typeof document !== "undefined") return ReactDOM.createPortal(panelElement, panelContainer(props));
		return panelElement;
	};
	const multilevelCardClassName = classNames("multilevel-card", {
		"multilevel-card--expanded": expanded,
		"multilevel-card--click": trigger === "click",
		"multilevel-card--hover": trigger === "hover"
	}, className);
	return /* @__PURE__ */ React.createElement("div", {
		className: multilevelCardClassName,
		style
	}, /* @__PURE__ */ React.createElement(CardWrapper, {
		trigger,
		onMouseEnter,
		onMouseLeave,
		className: "multilevel-card__card"
	}, card === null || card === void 0 ? void 0 : card(props)), renderPanel());
};
MultilevelCard.displayName = "MultilevelCard";
const Provider = (props) => /* @__PURE__ */ React.createElement(MultilevelCard, _objectSpread2(_objectSpread2({}, props === null || props === void 0 ? void 0 : props.props), props));
//#endregion
export { Provider as default };
