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 React, { memo } from "react";
//#region src/plus/productSelect/ProductList/gridComponents.tsx
const _excluded = ["children"], _excluded2 = [
	"children",
	"index",
	"item"
];
const parseGridConfig = (config) => {
	return config.split(":").map((num) => parseInt(num, 10)).filter((num) => !isNaN(num));
};
const calculateColumnWidth = (columns, index) => {
	const total = columns.reduce((sum, col) => sum + col, 0);
	return `${columns[index] / total * 100}%`;
};
const createGridComponents = (layout) => {
	if (!layout) layout = GRID_LAYOUTS.SINGLE_COLUMN;
	const columns = parseGridConfig(layout.config);
	const isGrid = layout.grid && columns.length > 1;
	const GridListComponent = memo((_ref) => {
		let { children } = _ref, props = _objectWithoutProperties(_ref, _excluded);
		if (!isGrid) return /* @__PURE__ */ React.createElement("div", _objectSpread2({
			className: "product-list-wrapper",
			style: {
				display: "flex",
				flexDirection: "column",
				gap: "12px"
			}
		}, props), children);
		return /* @__PURE__ */ React.createElement("div", _objectSpread2({
			className: "product-grid-wrapper",
			style: _objectSpread2({
				display: "flex",
				flexWrap: "wrap",
				gap: "12px"
			}, props.style)
		}, props), children);
	});
	const GridItemComponent = memo((_ref2) => {
		let { children, index, item } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
		if (!isGrid) {
			if (item && item.__typename === "category") return /* @__PURE__ */ React.createElement("div", _objectSpread2({ id: `ps_category_${item.id}` }, props), children);
			return /* @__PURE__ */ React.createElement("div", props, children);
		}
		if (item && item.__typename === "category") return /* @__PURE__ */ React.createElement("div", _objectSpread2({
			id: `ps_category_${item.id}`,
			style: _objectSpread2({
				width: "100%",
				flexShrink: 0
			}, props.style)
		}, props), children);
		const width = calculateColumnWidth(columns, index % columns.length);
		return /* @__PURE__ */ React.createElement("div", _objectSpread2({ style: _objectSpread2({
			width: `calc(${width} - ${(columns.length - 1) * 12 / columns.length}px)`,
			flexShrink: 0
		}, props.style) }, props), children);
	});
	GridListComponent.displayName = `GridListComponent_${layout.config}`;
	GridItemComponent.displayName = `GridItemComponent_${layout.config}`;
	return {
		List: GridListComponent,
		Item: GridItemComponent
	};
};
const GRID_LAYOUTS = {
	SINGLE_COLUMN: {
		grid: false,
		config: "12"
	},
	TWO_COLUMNS: {
		grid: true,
		config: "12:12"
	},
	THREE_COLUMNS: {
		grid: true,
		config: "8:8:8"
	},
	FOUR_COLUMNS: {
		grid: true,
		config: "6:6:6:6"
	},
	UNEQUAL_TWO: {
		grid: true,
		config: "8:16"
	},
	UNEQUAL_THREE: {
		grid: true,
		config: "6:12:6"
	}
};
//#endregion
export { GRID_LAYOUTS, createGridComponents };
