import { buildStackRows } from "./responsive-stack";

// The expected layouts are what frontend/responsive.ts builds for the same
// table, so the editor stacks exactly like the published page.
const table = [
    ["a", "b", "c"],
    ["d", "e", "f"],
];

const ids = (rows: ReturnType<typeof buildStackRows<string>>) =>
    rows.map(row => row.map(({ cell, repeat }) => (repeat ? `${cell}*` : cell)));

describe("buildStackRows", () => {
    test("stacks each column under the previous one", () => {
        expect(ids(buildStackRows(table, 1, false, false))).toEqual([
            ["a"],
            ["d"],
            ["b"],
            ["e"],
            ["c"],
            ["f"],
        ]);
    });

    test("keeps stackCount columns side by side", () => {
        expect(ids(buildStackRows(table, 2, false, false))).toEqual([
            ["a", "b"],
            ["d", "e"],
            ["c"],
            ["f"],
        ]);
    });

    test("starts every later stack with a copy of the first column", () => {
        expect(ids(buildStackRows(table, 2, false, true))).toEqual([
            ["a", "b"],
            ["d", "e"],
            ["a*", "c"],
            ["d*", "f"],
        ]);
    });

    test("stacks the rows instead when transposed", () => {
        expect(ids(buildStackRows(table, 1, true, false))).toEqual([
            ["a"],
            ["b"],
            ["c"],
            ["d"],
            ["e"],
            ["f"],
        ]);
    });

    test("transposed with the first row repeated", () => {
        expect(ids(buildStackRows(table, 2, true, true))).toEqual([
            ["a", "d"],
            ["b", "e"],
            ["c", "f"],
        ]);
    });

    test("skips the positions no cell starts at", () => {
        expect(ids(buildStackRows([["a", null, "c"]], 1, false, false))).toEqual(
            [["a"], ["c"]]
        );
    });

    test("an empty table stacks to nothing", () => {
        expect(buildStackRows([], 1, false, false)).toEqual([]);
    });
});