"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _box = _interopRequireDefault(require("../box/box"));
var _theme = require("../../../theme");
var _hooks = require("../../../hooks");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
 * Grid is a layout component that arranges its children into rows and columns.
 * Each child is given an equal amount of space.
 */
const Grid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  numCols = 1,
  spacing = "3",
  spacingX,
  spacingY,
  ...props
}, ref) => {
  const computedSpacingStyle = (0, _hooks.useStyleProps)({
    paddingHorizontal: spacingX ?? spacing,
    paddingVertical: spacingY ?? spacing
  }, _theme.spacingStyleFunction);
  const renderRows = () => {
    const rows = [];
    _react.default.Children.forEach(children, (child, index) => {
      const rowIndex = Math.floor(index / numCols);
      if (!rows[rowIndex]) {
        rows[rowIndex] = [];
      }
      rows[rowIndex].push( /*#__PURE__*/_react.default.createElement(_box.default, {
        key: index,
        width: `${100 / numCols}%`,
        style: {
          paddingLeft: index % numCols !== 0 ? computedSpacingStyle.style.paddingHorizontal / 2 : 0,
          paddingRight: index % numCols !== numCols - 1 ? computedSpacingStyle.style.paddingHorizontal / 2 : 0,
          paddingTop: rowIndex !== 0 ? computedSpacingStyle.style.paddingVertical / 2 : 0,
          paddingBottom: computedSpacingStyle.style.paddingVertical / 2
        }
      }, child));
    });
    return rows.map((row, index) => /*#__PURE__*/_react.default.createElement(_box.default, {
      key: index,
      flexDirection: "row"
    }, row));
  };
  return /*#__PURE__*/_react.default.createElement(_box.default, _extends({}, props, {
    ref: ref
  }), renderRows());
}));
Grid.displayName = "Grid";
var _default = exports.default = Grid;
//# sourceMappingURL=grid.js.map