const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_useImageLoad = require("./hooks/useImageLoad.js");
const require_usePisellImageCardStyle = require("./hooks/usePisellImageCardStyle.js");
const require_getImageObjectFit = require("./utils/getImageObjectFit.js");
const require_getTruncatedText = require("./utils/getTruncatedText.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
require("./PisellImageCard.less");
//#region src/components/PisellCards/components/PisellImageCard/PisellImageCard.tsx
const _excluded = [
	"dataSource",
	"fillMode",
	"lazy",
	"active",
	"disabled",
	"loading",
	"children",
	"onClick",
	"aliWidth"
];
/**
* PisellImageCard 图片卡片组件
* 用于展示图片，支持占位图、失败兜底、文字降级、懒加载等功能
*
* @component
* @example
* ```tsx
* // 基础用法
* <PisellImageCard
*   dataSource={{
*     src: 'https://example.com/image.png',
*     alt: '商品图片'
*   }}
* />
*
* // 带占位图和失败兜底
* <PisellImageCard
*   dataSource={{
*     src: 'https://example.com/image.png',
*     alt: '商品图片',
*     fallbackSrc: 'https://example.com/placeholder.png',
*     errorSrc: 'https://example.com/error.png'
*   }}
* />
*
* // 自定义尺寸和填充模式
* <PisellImageCard
*   dataSource={{ src: 'https://example.com/image.png' }}
*   width={200}
*   height={200}
*   fillMode="contain"
* />
*
* // 启用懒加载
* <PisellImageCard
*   dataSource={{ src: 'https://example.com/image.png' }}
*   lazy
* />
*
* // 激活状态
* <PisellImageCard
*   dataSource={{ src: 'https://example.com/image.png' }}
*   active={{ value: true }}
* />
* ```
*/
const PisellImageCard = (props) => {
	const { dataSource = {}, fillMode = "cover", lazy = false, active, disabled, loading: loadingState, children, onClick, aliWidth } = props, restProps = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const { src, alt, errorSrc, fallbackSrc, text } = dataSource;
	const { loading: imageLoading, error: imageError, imgRef } = require_useImageLoad.useImageLoad(src, lazy);
	const { mergedStyle, mergedClassName } = require_usePisellImageCardStyle.usePisellImageCardStyle(props);
	/**
	* 获取当前应该显示的图片地址
	* 优先级：loading(fallbackSrc) > error(errorSrc) > src
	*/
	const displaySource = (0, react.useMemo)(() => {
		if (imageLoading && fallbackSrc) return fallbackSrc;
		if (imageError && errorSrc) return errorSrc;
		if (src) return src;
		return null;
	}, [
		imageLoading,
		imageError,
		src,
		errorSrc,
		fallbackSrc
	]);
	/**
	* 是否显示文字降级
	* 当没有任何图片可显示时，显示 alt 的前 2 个字符
	*/
	const showTextFallback = (0, react.useMemo)(() => {
		return alt;
	}, [displaySource, alt]);
	/**
	* 截取后的文字
	*/
	const truncatedText = (0, react.useMemo)(() => {
		if (text) return text;
		return require_getTruncatedText.getTruncatedText(alt, 2);
	}, [alt, text]);
	/**
	* 处理点击事件
	*/
	const handleClick = (0, react.useCallback)((e) => {
		if ((disabled === null || disabled === void 0 ? void 0 : disabled.value) || (loadingState === null || loadingState === void 0 ? void 0 : loadingState.value)) return;
		onClick === null || onClick === void 0 || onClick(e);
	}, [
		disabled,
		loadingState,
		onClick
	]);
	/**
	* 渲染状态的 extra 内容
	* 优先级：loading > disabled > active
	*/
	const renderExtra = (0, react.useCallback)(() => {
		if ((loadingState === null || loadingState === void 0 ? void 0 : loadingState.value) && (loadingState === null || loadingState === void 0 ? void 0 : loadingState.extra)) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-image-card__extra" }, loadingState.extra);
		if ((disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.extra)) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-image-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.default.createElement("div", { className: "pisell-image-card__extra" }, active.extra);
		return null;
	}, [
		active,
		disabled,
		loadingState
	]);
	return /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2({
		ref: imgRef,
		className: mergedClassName,
		style: mergedStyle,
		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": (loadingState === null || loadingState === void 0 ? void 0 : loadingState.value) || imageLoading
	}, restProps), displaySource && /* @__PURE__ */ react.default.createElement("img", {
		src: _pisell_utils.image.ali(displaySource, aliWidth),
		alt: alt || "",
		className: "pisell-image-card__image",
		style: { objectFit: require_getImageObjectFit.getImageObjectFit(fillMode) }
	}), showTextFallback && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-image-card__text-fallback" }, truncatedText), renderExtra(), children);
};
/**
* Provider 包装器
* 兼容 PisellCards 系统的 props 传递方式
*/
const Provider = (props) => /* @__PURE__ */ react.default.createElement(PisellImageCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props === null || props === void 0 ? void 0 : props.props), props));
//#endregion
exports.default = Provider;
