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);
let antd = require("antd");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./index.less");
//#region src/pro/Selector/components/LayoutContainer/index.tsx
const ARow = antd.Row;
const ACol = antd.Col;
/**
* 标准化断点配置
* 将简写形式 { 420: 2 } 转换为完整形式 { 420: { columns: 2 } }
*/
function normalizeBreakpoints(breakpoints, defaultGap) {
	const normalized = {};
	for (const [width, config] of Object.entries(breakpoints)) {
		const widthNum = Number(width);
		if (typeof config === "number") normalized[widthNum] = {
			columns: config,
			gap: defaultGap
		};
		else {
			var _config$gap;
			normalized[widthNum] = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, config), {}, { gap: (_config$gap = config.gap) !== null && _config$gap !== void 0 ? _config$gap : defaultGap });
		}
	}
	return normalized;
}
/**
* 根据 minWidth 和 maxColumns 自动生成断点配置
*/
function generateBreakpoints(minWidth, maxColumns, gap = 16) {
	const gapNum = typeof gap === "number" ? gap : parseInt(gap, 10) || 16;
	const breakpoints = { 0: {
		columns: 1,
		gap
	} };
	for (let cols = 2; cols <= maxColumns; cols++) {
		const breakpoint = cols * minWidth + (cols - 1) * gapNum;
		breakpoints[breakpoint] = {
			columns: cols,
			gap
		};
	}
	return breakpoints;
}
/**
* 根据容器宽度计算当前应该使用的断点配置
*/
function getActiveBreakpoint(width, breakpoints, defaultColumns = 1, defaultGap = 16) {
	const sortedBreakpoints = Object.keys(breakpoints).map(Number).sort((a, b) => b - a);
	for (const breakpoint of sortedBreakpoints) if (width >= breakpoint) return breakpoints[breakpoint];
	return {
		columns: defaultColumns,
		gap: defaultGap
	};
}
/**
* 解析响应式配置，生成最终的断点映射
*/
function parseResponsiveConfig(responsive) {
	const { minWidth, maxColumns, breakpoints, gap = 16 } = responsive;
	let finalBreakpoints = {};
	if (minWidth && maxColumns) finalBreakpoints = generateBreakpoints(minWidth, maxColumns, gap);
	if (breakpoints) {
		const normalizedBreakpoints = normalizeBreakpoints(breakpoints, gap);
		finalBreakpoints = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, finalBreakpoints), normalizedBreakpoints);
	}
	if (Object.keys(finalBreakpoints).length === 0) {
		var _responsive$defaultCo;
		finalBreakpoints = { 0: {
			columns: (_responsive$defaultCo = responsive.defaultColumns) !== null && _responsive$defaultCo !== void 0 ? _responsive$defaultCo : 1,
			gap
		} };
	}
	return finalBreakpoints;
}
/**
* 自定义 Hook：使用 ResizeObserver 监听容器宽度变化
*/
function useContainerWidth(ref, debounceMs = 0) {
	const [width, setWidth] = (0, react.useState)(0);
	const timeoutRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		const element = ref.current;
		if (!element) return;
		const updateWidth = (newWidth) => {
			if (debounceMs > 0) {
				if (timeoutRef.current) clearTimeout(timeoutRef.current);
				timeoutRef.current = setTimeout(() => {
					setWidth(newWidth);
				}, debounceMs);
			} else setWidth(newWidth);
		};
		const observer = new ResizeObserver((entries) => {
			const entry = entries[0];
			if (entry) updateWidth(entry.contentRect.width);
		});
		observer.observe(element);
		setWidth(element.getBoundingClientRect().width);
		return () => {
			observer.disconnect();
			if (timeoutRef.current) clearTimeout(timeoutRef.current);
		};
	}, [ref, debounceMs]);
	return width;
}
const baseClassName = "pisell-pro-selector_layout";
/**
* 统一的布局容器组件
*
* 支持三种布局模式：
* 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
* 2. Custom 布局：通过 className 使用预设样式
* 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
*/
function LayoutContainer({ className: containerClassName, config, children }) {
	var _responsiveConfig$deb;
	const containerRef = (0, react.useRef)(null);
	const responsiveConfig = config === null || config === void 0 ? void 0 : config.responsive;
	const hasResponsive = !!responsiveConfig;
	const breakpoints = (0, react.useMemo)(() => {
		if (!responsiveConfig) return null;
		return parseResponsiveConfig(responsiveConfig);
	}, [responsiveConfig]);
	const containerWidth = useContainerWidth(containerRef, (_responsiveConfig$deb = responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.debounce) !== null && _responsiveConfig$deb !== void 0 ? _responsiveConfig$deb : 0);
	const activeConfig = (0, react.useMemo)(() => {
		if (!breakpoints) return null;
		return getActiveBreakpoint(containerWidth, breakpoints, responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.defaultColumns, responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.gap);
	}, [
		containerWidth,
		breakpoints,
		responsiveConfig
	]);
	if (!config) return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(baseClassName, containerClassName) }, children);
	const { type, className, containerStyle = {} } = config;
	if (hasResponsive) {
		var _activeConfig$columns, _activeConfig$gap;
		const cssVariables = {
			"--layout-columns": (_activeConfig$columns = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.columns) !== null && _activeConfig$columns !== void 0 ? _activeConfig$columns : 1,
			"--layout-gap": typeof (activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.gap) === "number" ? `${activeConfig.gap}px` : (_activeConfig$gap = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.gap) !== null && _activeConfig$gap !== void 0 ? _activeConfig$gap : "16px"
		};
		return /* @__PURE__ */ react.default.createElement("div", {
			ref: containerRef,
			className: (0, classnames.default)(baseClassName, `${baseClassName}-responsive`, containerClassName, className),
			style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cssVariables), containerStyle), activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.style)
		}, children);
	}
	if (type !== "antdGrid") {
		const layoutClassName = (0, classnames.default)(baseClassName, containerClassName, className);
		return /* @__PURE__ */ react.default.createElement("div", {
			className: layoutClassName,
			style: containerStyle
		}, children);
	}
	const { columns = 1, align, justify, gutter, wrap, colConfig = {} } = config;
	return /* @__PURE__ */ react.default.createElement(ARow, {
		gutter,
		justify,
		align,
		wrap
	}, children.map((child, index) => /* @__PURE__ */ react.default.createElement(ACol, require_objectSpread2._objectSpread2({
		key: index,
		span: columns ? 24 / columns : void 0
	}, colConfig), child)));
}
//#endregion
exports.default = LayoutContainer;
