const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
require("./WaterfallList.less");
//#region src/components/list/components/WaterfallList/WaterfallList.tsx
const WaterfallList = (props) => {
	const { layout, layoutDirection, columnGap, rowGap, columns, rows, registerItemRef, children, renderItem } = props;
	const hasChildren = children && react.default.Children.count(children) > 0;
	return /* @__PURE__ */ react.default.createElement("div", {
		className: "waterfall-container",
		style: require_objectSpread2._objectSpread2({
			display: "flex",
			gap: layoutDirection === "vertical" ? `${columnGap}px` : `${rowGap}px`,
			width: "100%",
			flexDirection: layoutDirection === "vertical" ? "row" : "column",
			alignItems: "flex-start"
		}, layoutDirection === "horizontal" && {
			minHeight: "fit-content",
			height: "auto"
		})
	}, false, layout.tracks.map((track, trackIndex) => {
		let globalIndex = 0;
		for (let i = 0; i < trackIndex; i++) globalIndex += layout.tracks[i].items.length;
		return /* @__PURE__ */ react.default.createElement("div", {
			key: trackIndex,
			className: `waterfall-track waterfall-track-${layoutDirection}`,
			style: require_objectSpread2._objectSpread2({
				flex: layoutDirection === "vertical" ? "1 0 0" : "0 0 auto",
				display: "flex",
				flexDirection: layoutDirection === "vertical" ? "column" : "row",
				gap: layoutDirection === "vertical" ? `${rowGap}px` : `${columnGap}px`
			}, layoutDirection === "horizontal" && {
				width: "100%",
				minHeight: "120px",
				alignItems: "flex-start"
			})
		}, track.items.map((item, trackItemIndex) => {
			const itemIndex = globalIndex + trackItemIndex;
			return /* @__PURE__ */ react.default.createElement("div", {
				key: item.id || `${trackIndex}-${trackItemIndex}`,
				className: "list-item waterfall-item",
				ref: (el) => registerItemRef(item.id || `${trackIndex}-${trackItemIndex}`, el),
				style: require_objectSpread2._objectSpread2({}, layoutDirection === "vertical" ? {
					width: "100%",
					height: item.height ? `${item.height}px` : "auto",
					minHeight: "unset",
					maxHeight: "none",
					flexShrink: 0,
					flexGrow: 0,
					boxSizing: "border-box",
					overflow: "hidden",
					position: "relative"
				} : {
					width: item.width ? `${item.width}px` : "auto",
					flexShrink: 0
				})
			}, false, hasChildren ? react.default.Children.map(children, (child, childIndex) => {
				if ((0, react.isValidElement)(child)) return (0, react.cloneElement)(child, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, child.props), {}, {
					item,
					index: itemIndex,
					key: `${item.id || `${trackIndex}-${trackItemIndex}`}-${childIndex}`
				}));
				return child;
			}) : renderItem ? renderItem(item, itemIndex) : /* @__PURE__ */ react.default.createElement("div", {
				className: "default-waterfall-item",
				style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, layoutDirection === "horizontal" && {
					width: item.width ? `${item.width}px` : "200px",
					minHeight: "120px",
					flexShrink: 0
				}), {}, {
					padding: "16px",
					backgroundColor: "#fff",
					borderRadius: "8px",
					boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
					border: "1px solid #f0f0f0",
					display: "flex",
					flexDirection: "column",
					position: "relative",
					height: "100%",
					boxSizing: "border-box"
				})
			}, item.title && /* @__PURE__ */ react.default.createElement("h3", { style: {
				margin: "0 0 12px 0",
				fontSize: "16px",
				fontWeight: 500,
				color: "#333"
			} }, item.title), item.name && !item.title && /* @__PURE__ */ react.default.createElement("h3", { style: {
				margin: "0 0 12px 0",
				fontSize: "16px",
				fontWeight: 500,
				color: "#333"
			} }, item.name), item.content && /* @__PURE__ */ react.default.createElement("p", { style: {
				margin: 0,
				fontSize: "14px",
				lineHeight: "1.5",
				color: "#666"
			} }, item.content), item.description && !item.content && /* @__PURE__ */ react.default.createElement("p", { style: {
				margin: 0,
				fontSize: "14px",
				lineHeight: "1.5",
				color: "#666"
			} }, item.description), !item.title && !item.name && !item.content && !item.description && /* @__PURE__ */ react.default.createElement("div", { style: {
				fontSize: "14px",
				color: "#999",
				wordBreak: "break-all"
			} }, typeof item === "object" ? Object.entries(item).slice(0, 3).map(([key, value]) => /* @__PURE__ */ react.default.createElement("div", {
				key,
				style: { marginBottom: "4px" }
			}, /* @__PURE__ */ react.default.createElement("strong", null, key, ":"), " ", String(value))) : String(item))));
		}));
	}));
};
//#endregion
exports.default = WaterfallList;
