import { _ as _extends } from '../../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../../objectWithoutProperties-TXwlfNxG.js';
import React__default from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Masonry, { arrayToColumns } from '../index.js';
import '../../defineProperty-CEd-kZQW.js';
import 'prop-types';

var _excluded = ["num"];
describe('Array to columns', function () {
  /*
  It should go in a sinistrodextral flow (Woo! big word, I just learned it)
  */
  it("splits array into equal columns in zigzag flow", function () {
    var initial = [1, 2, 3, 4, 5, 6];
    var expected = [[1, 3, 5], [2, 4, 6]];
    expect(arrayToColumns(initial, 2)).toEqual(expected);
  });
  /*
   What's excess in this context?
   They are the remainders from array-length / columns
   For a given array of 11 items, if we request 3 columns
   we should get 11 / 3 items in each column. That gives 
   a floored approximation of 3 items per column.
   3x3 = 9 so the excess is the 2 left to make up 11
  */

  it("places excesses in correct columns", function () {
    var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
    var expected1 = [[1, 4, 7, 10], [2, 5, 8, 11], [3, 6, 9]];
    var array2 = [1, 2, 3, 4];
    var expected2 = [[1, 4], [2], [3]];
    var array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    var expected3 = [[1, 9, 17], [2, 10, 18], [3, 11, 19], [4, 12, 20], [5, 13], [6, 14], [7, 15], [8, 16]];
    expect(arrayToColumns(array1, 3)).toEqual(expected1);
    expect(arrayToColumns(array2, 3)).toEqual(expected2);
    expect(arrayToColumns(array3, 8)).toEqual(expected3);
  });
});
describe("Masonry grid", function () {
  it("renders custom components as children", function () {
    var items = [1, 2, 3, 4];

    var GridItem = function GridItem(_ref) {
      var num = _ref.num;
      return /*#__PURE__*/React__default.createElement("div", null, "Item ", num);
    };

    render( /*#__PURE__*/React__default.createElement(Masonry, {
      columns: "2",
      gap: "4"
    }, items.map(function (item) {
      return /*#__PURE__*/React__default.createElement(GridItem, {
        key: item,
        num: item
      });
    })));
    expect(screen.getByText("Item 1")).toBeInTheDocument();
  });
  it("renders custom components with forwarded refs as children", function () {
    var items = [1, 2, 3, 4];
    var GridItem = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
      var num = _ref2.num,
          props = _objectWithoutProperties(_ref2, _excluded);

      return /*#__PURE__*/React__default.createElement("div", _extends({
        ref: ref
      }, props), "Item ", num);
    });
    render( /*#__PURE__*/React__default.createElement(Masonry, {
      columns: "2",
      gap: "4"
    }, items.map(function (item) {
      return /*#__PURE__*/React__default.createElement(GridItem, {
        key: item,
        num: item
      });
    })));
    expect(screen.getByText("Item 2")).toBeInTheDocument();
  });
});
