'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var chunk = require('lodash.chunk');
var Flow_styles = require('./Flow.styles.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cls__default = /*#__PURE__*/_interopDefault(cls);
var chunk__default = /*#__PURE__*/_interopDefault(chunk);

var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
var flowRoot = function flowRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    var children = _ref.children,
      className = _ref.className,
      style = _ref.style,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
      arrangement = _ref.arrangement,
      alignment = _ref.alignment,
      _ref$mainAxisGap = _ref.mainAxisGap,
      mainAxisGap = _ref$mainAxisGap === void 0 ? '0' : _ref$mainAxisGap,
      _ref$crossAxisGap = _ref.crossAxisGap,
      crossAxisGap = _ref$crossAxisGap === void 0 ? '0' : _ref$crossAxisGap,
      _ref$minColWidth = _ref.minColWidth,
      minColWidth = _ref$minColWidth === void 0 ? 'auto' : _ref$minColWidth,
      itemsPerLine = _ref.itemsPerLine,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var isVertical = orientation === 'vertical';
    var hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');
    var needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);
    var innerMainAxisGap = typeof mainAxisGap === 'number' || !Number.isNaN(+mainAxisGap) ? "".concat(mainAxisGap || 0, "px") : mainAxisGap;
    var innerCrossAxisGap = typeof crossAxisGap === 'number' || !Number.isNaN(+crossAxisGap) ? "".concat(crossAxisGap || 0, "px") : crossAxisGap;
    if (arrangement === 'spaceBetween' || arrangement === 'spaceAround') {
      innerMainAxisGap = '0';
    }
    var hasChunks = Number(itemsPerLine) > 0;
    var chunks = hasChunks ? chunk__default.default(React__default.default.Children.toArray(children), itemsPerLine) : [];
    var gap = isVertical ? "".concat(innerMainAxisGap, " ").concat(innerCrossAxisGap) : "".concat(innerCrossAxisGap, " ").concat(innerMainAxisGap);
    var wrapperGap = isVertical ? "0 ".concat(innerCrossAxisGap) : "".concat(innerCrossAxisGap, " 0");
    var lineGap = isVertical ? "".concat(innerMainAxisGap, " 0") : "0 ".concat(innerMainAxisGap);
    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      ref: ref,
      className: cls__default.default(className, {
        vertical: isVertical,
        grid: hasMinWidth,
        elastic: hasMinWidth,
        hasChunks: hasChunks
      }),
      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, {
        '--plasma-private-gap': hasChunks ? wrapperGap : gap,
        '--plasma-private-items': String(itemsPerLine),
        '--plasma-private-min-width': String(minColWidth)
      }),
      "data-arrangement": arrangement,
      "data-alignment": alignment
    }, rest), hasChunks && chunks.map(function (chunkNode) {
      return /*#__PURE__*/React__default.default.createElement(Flow_styles.Line, {
        className: cls__default.default({
          vertical: isVertical,
          grid: needGrid,
          elastic: hasMinWidth
        }),
        style: {
          '--plasma-private-gap': lineGap
        },
        "data-arrangement": arrangement,
        "data-alignment": alignment
      }, chunkNode);
    }), !hasChunks && children);
  });
};
var flowConfig = {
  name: 'Flow',
  tag: 'div',
  layout: flowRoot,
  base: Flow_styles.base,
  defaults: {},
  variations: {}
};

exports.flowConfig = flowConfig;
exports.flowRoot = flowRoot;
