var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/pro/Selector/components/LayoutContainer/index.tsx
var LayoutContainer_exports = {};
__export(LayoutContainer_exports, {
  default: () => LayoutContainer_default
});
module.exports = __toCommonJS(LayoutContainer_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_classnames = __toESM(require("classnames"));
var import_index = require("./index.less");
var ARow = import_antd.Row;
var ACol = import_antd.Col;
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 {
      normalized[widthNum] = { ...config, gap: config.gap ?? defaultGap };
    }
  }
  return normalized;
}
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 = { ...finalBreakpoints, ...normalizedBreakpoints };
  }
  if (Object.keys(finalBreakpoints).length === 0) {
    finalBreakpoints = { 0: { columns: responsive.defaultColumns ?? 1, gap } };
  }
  return finalBreakpoints;
}
function useContainerWidth(ref, debounceMs = 0) {
  const [width, setWidth] = (0, import_react.useState)(0);
  const timeoutRef = (0, import_react.useRef)(null);
  (0, import_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;
}
var baseClassName = "pisell-pro-selector_layout";
function LayoutContainer({
  className: containerClassName,
  config,
  children
}) {
  const containerRef = (0, import_react.useRef)(null);
  const responsiveConfig = config == null ? void 0 : config.responsive;
  const hasResponsive = !!responsiveConfig;
  const breakpoints = (0, import_react.useMemo)(() => {
    if (!responsiveConfig) return null;
    return parseResponsiveConfig(responsiveConfig);
  }, [responsiveConfig]);
  const containerWidth = useContainerWidth(
    containerRef,
    (responsiveConfig == null ? void 0 : responsiveConfig.debounce) ?? 0
  );
  const activeConfig = (0, import_react.useMemo)(() => {
    if (!breakpoints) return null;
    return getActiveBreakpoint(
      containerWidth,
      breakpoints,
      responsiveConfig == null ? void 0 : responsiveConfig.defaultColumns,
      responsiveConfig == null ? void 0 : responsiveConfig.gap
    );
  }, [containerWidth, breakpoints, responsiveConfig]);
  if (!config) {
    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(baseClassName, containerClassName) }, children);
  }
  const { type, className, containerStyle = {} } = config;
  if (hasResponsive) {
    const cssVariables = {
      "--layout-columns": (activeConfig == null ? void 0 : activeConfig.columns) ?? 1,
      "--layout-gap": typeof (activeConfig == null ? void 0 : activeConfig.gap) === "number" ? `${activeConfig.gap}px` : (activeConfig == null ? void 0 : activeConfig.gap) ?? "16px"
    };
    return /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        ref: containerRef,
        className: (0, import_classnames.default)(
          baseClassName,
          `${baseClassName}-responsive`,
          containerClassName,
          className
        ),
        style: { ...cssVariables, ...containerStyle, ...activeConfig == null ? void 0 : activeConfig.style }
      },
      children
    );
  }
  if (type !== "antdGrid") {
    const layoutClassName = (0, import_classnames.default)(
      baseClassName,
      containerClassName,
      className
    );
    return /* @__PURE__ */ import_react.default.createElement("div", { className: layoutClassName, style: containerStyle }, children);
  }
  const { columns = 1, align, justify, gutter, wrap, colConfig = {} } = config;
  return /* @__PURE__ */ import_react.default.createElement(ARow, { gutter, justify, align, wrap }, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(
    ACol,
    {
      key: index,
      span: columns ? 24 / columns : void 0,
      ...colConfig
    },
    child
  )));
}
var LayoutContainer_default = LayoutContainer;
