import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { COMPONENT_PREFIX, getRowKey } from "./utils/index.js";
import useGridStyle from "./hooks/useGridStyle.js";
import React, { memo, useMemo } from "react";
import classNames from "classnames";
import "./PisellBasicGrid.less";
//#region src/components/PisellBasicGrid/PisellBasicGrid.tsx
/**
* PisellBasicGrid 基础布局组件
* @description 基于 Flexbox 的基础布局组件，主要用于控制循环型数据组件的排列方式
* @template T - 数据源项的类型
* @example
* // children 模式
* <PisellBasicGrid columns={4} gap={16} wrap="wrap">
*   {items.map(item => <Card key={item.id}>{item.name}</Card>)}
* </PisellBasicGrid>
*
* @example
* // dataSource 模式
* <PisellBasicGrid
*   columns={4}
*   gap={16}
*   wrap="wrap"
*   dataSource={items}
*   rowKey="id"
*   renderItem={(item) => <Card>{item.name}</Card>}
* />
*/
const PisellBasicGrid = (props) => {
	const { children, className, style, direction = "horizontal", wrap = "nowrap", columns, equalWidth = false, gap, rowGap, columnGap, justify = "start", align = "stretch", alignContent = "stretch", dataSource, renderItem, rowKey, startSlot, endSlot } = props;
	/**
	* 获取布局样式
	*/
	const { containerStyle, itemStyle } = useGridStyle({
		direction,
		wrap,
		columns,
		equalWidth,
		gap,
		rowGap,
		columnGap,
		justify,
		align,
		alignContent
	});
	/**
	* 合并容器样式
	*/
	const mergedStyle = useMemo(() => {
		return _objectSpread2(_objectSpread2({}, containerStyle), style);
	}, [containerStyle, style]);
	/**
	* 渲染内容
	* @description
	* - dataSource 为 undefined 时，渲染 children
	* - dataSource 为空数组时，不渲染任何内容
	* - dataSource 有数据时，使用 renderItem 渲染
	*/
	const renderContent = () => {
		if (dataSource === void 0) {
			if (columns !== void 0 || equalWidth) return React.Children.map(children, (child, index) => {
				var _child$key;
				if (!React.isValidElement(child)) return child;
				return /* @__PURE__ */ React.createElement("div", {
					key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
					className: `${COMPONENT_PREFIX}-item`,
					style: itemStyle
				}, child);
			});
			return children;
		}
		if (dataSource.length === 0) return null;
		return dataSource.map((item, index) => {
			const key = getRowKey(item, index, rowKey);
			const content = renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index);
			return /* @__PURE__ */ React.createElement("div", {
				key,
				className: `${COMPONENT_PREFIX}-item`,
				style: itemStyle
			}, content);
		});
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames(COMPONENT_PREFIX, className),
		style: mergedStyle
	}, startSlot, " ", renderContent(), " ", endSlot);
};
/**
* 使用 memo 优化组件性能
* @description 当 props 没有变化时，避免不必要的重新渲染
*/
const MemoizedPisellBasicGrid = memo(PisellBasicGrid);
//#endregion
export { MemoizedPisellBasicGrid as default };
