import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import BadgeWrapper from "../TextCard/components/BadgeWrapper.js";
import GraphicArea from "./components/GraphicArea.js";
import TextContent from "./components/TextContent.js";
import { useGraphicTextCardStyle } from "./hooks/useGraphicTextCardStyle.js";
import { useGraphicTextCardClick } from "./hooks/useGraphicTextCardClick.js";
import { getDefaultGraphicSize } from "./utils/index.js";
import React, { useCallback, useEffect, useMemo } from "react";
import "./GraphicTextCard.less";
//#region src/components/PisellCards/components/GraphicTextCard/GraphicTextCard.tsx
const _excluded = [
	"text",
	"variant",
	"size",
	"image",
	"icon",
	"graphicConfig",
	"graphicSlot",
	"badge",
	"prefixSlot",
	"suffixSlot",
	"textConfig",
	"active",
	"disabled",
	"loading",
	"children",
	"render",
	"dataSource"
];
/**
* GraphicTextCard 图文卡片组件
* 结合图标/图片、文本和状态标识，专为标签页、分类导航等场景设计
*
* @component
* @example
* ```tsx
* // 基础用法（样式一：垂直布局-图片）
* <GraphicTextCard
*   text="Tab title"
*   image="https://example.com/image.png"
*   variant="vertical-image"
* />
*
* // 使用图标（样式二：垂直布局-图标）
* <GraphicTextCard
*   text="Tabs"
*   icon={<SmileIcon />}
*   variant="vertical-icon"
* />
*
* // 横向布局（样式三）
* <GraphicTextCard
*   text="Tab title"
*   image="https://example.com/image.png"
*   variant="horizontal"
* />
*
* // 卡片式（样式四）
* <GraphicTextCard
*   text="Tab title"
*   image="https://example.com/image.png"
*   variant="card"
*   active={{ value: true }}
* />
*
* // 带角标
* <GraphicTextCard
*   text="Tab title"
*   icon={<SmileIcon />}
*   badge={{ type: 'number', content: 99 }}
* />
* ```
*/
const GraphicTextCard = (props) => {
	const { text, variant = "vertical-image", size = "default", image, icon, graphicConfig = {}, graphicSlot, badge, prefixSlot, suffixSlot, textConfig, active, disabled, loading, children, render, dataSource } = props, restProps = _objectWithoutProperties(props, _excluded);
	const { mergedStyle, mergedClassName } = useGraphicTextCardStyle(props);
	const handleClick = useGraphicTextCardClick(props);
	useEffect(() => {
		document.body.id = "body";
	}, []);
	/**
	* 计算图形区域尺寸
	* 优先使用 graphicConfig 中的配置，否则使用默认值
	*/
	const graphicSize = useMemo(() => {
		var _graphicConfig$width, _graphicConfig$height;
		const defaultSize = getDefaultGraphicSize(variant, size);
		return {
			width: (_graphicConfig$width = graphicConfig.width) !== null && _graphicConfig$width !== void 0 ? _graphicConfig$width : defaultSize.width,
			height: (_graphicConfig$height = graphicConfig.height) !== null && _graphicConfig$height !== void 0 ? _graphicConfig$height : defaultSize.height
		};
	}, [
		variant,
		size,
		graphicConfig.width,
		graphicConfig.height
	]);
	/**
	* 渲染状态的 extra 内容
	* 优先级：loading > disabled > active
	*/
	const renderExtra = useCallback(() => {
		if ((loading === null || loading === void 0 ? void 0 : loading.value) && (loading === null || loading === void 0 ? void 0 : loading.extra)) return /* @__PURE__ */ React.createElement("div", { className: "graphic-text-card__extra" }, loading.extra);
		if ((disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.extra)) return /* @__PURE__ */ React.createElement("div", { className: "graphic-text-card__extra" }, disabled.extra);
		if ((active === null || active === void 0 ? void 0 : active.value) && (active === null || active === void 0 ? void 0 : active.extra)) return /* @__PURE__ */ React.createElement("div", { className: "graphic-text-card__extra" }, active.extra);
		return null;
	}, [
		active,
		disabled,
		loading
	]);
	/**
	* 渲染主内容
	*/
	const renderContent = useCallback(() => {
		if (render) return render(props);
		console.log("graphicSize.width", graphicSize.width);
		return /* @__PURE__ */ React.createElement(React.Fragment, null, prefixSlot, graphicSlot || /* @__PURE__ */ React.createElement(GraphicArea, {
			image,
			icon,
			config: _objectSpread2({
				width: graphicSize.width,
				height: graphicSize.height
			}, graphicConfig)
		}), /* @__PURE__ */ React.createElement(TextContent, {
			text,
			textConfig,
			active
		}), suffixSlot);
	}, [
		render,
		props,
		prefixSlot,
		graphicSlot,
		image,
		icon,
		graphicConfig,
		graphicSize,
		text,
		textConfig,
		suffixSlot,
		active
	]);
	return /* @__PURE__ */ React.createElement(BadgeWrapper, { badge }, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({
		onClick: handleClick,
		"data-active": active === null || active === void 0 ? void 0 : active.value,
		"data-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
		"data-loading": loading === null || loading === void 0 ? void 0 : loading.value,
		role: "button",
		"aria-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
		tabIndex: (disabled === null || disabled === void 0 ? void 0 : disabled.value) ? -1 : 0
	}, restProps), {}, {
		className: mergedClassName,
		style: mergedStyle
	}), renderContent(), renderExtra(), children));
};
/**
* Provider 包装器
* 兼容 PisellCards 系统的 props 传递方式
*/
const Provider = (props) => /* @__PURE__ */ React.createElement(GraphicTextCard, _objectSpread2(_objectSpread2({}, props === null || props === void 0 ? void 0 : props.props), props));
//#endregion
export { Provider as default };
