import React from 'react';
import { Row, Col } from '@pisell/materials';
import "./index.less";
var GridLayout = function GridLayout(_ref) {
  var gridConfig = _ref.gridConfig,
    items = _ref.items,
    renderItem = _ref.renderItem;
  var gridColumns = React.useMemo(function () {
    if (!gridConfig) return [];
    var columns = gridConfig.split(':').map(Number);
    var isValid = columns.every(function (col) {
      return col > 0 && Number.isInteger(col);
    }) && columns.reduce(function (sum, col) {
      return sum + col;
    }, 0) <= 24;
    return isValid ? columns : [12, 12];
  }, [gridConfig]);
  return /*#__PURE__*/React.createElement(Row, {
    gutter: [12, 12],
    className: "pisell-product-select-grid-layout"
  }, items.map(function (item, index) {
    return /*#__PURE__*/React.createElement(Col, {
      key: index,
      span: gridColumns.length > 0 ? gridColumns[index % gridColumns.length] : 12
    }, renderItem(item));
  }));
};
export default GridLayout;