var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { memo, useMemo } from "react";
import styled from "styled-components";
import { border, gridColumn } from "styled-system";
import Grid from "../layout/Grid";
import Flex from "../layout/Flex";
import * as Columns from "./Columns";
const Container = styled(Grid) `
  ${border}
`;
export const ExtraRowContainer = styled.div.attrs({ gridColumn: "1 / -1" }) `
  ${gridColumn}
`;
export const RowContainer = styled(Flex) `
  display: contents;
`;
function RowsComponent({ data, columns, render, extraRender, renderRow, }) {
    return (React.createElement(React.Fragment, { key: "row-component" }, data.map((elt, rowIndex) => {
        const row = (React.createElement(React.Fragment, null,
            columns.map((column, columnIndex) => (React.createElement(React.Fragment, { key: `row-component-column-${rowIndex}${columnIndex}` }, render
                ? render({
                    column,
                    rowIndex,
                    columnIndex,
                    children: column.render({ elt, rowIndex, columnIndex }),
                })
                : column.render({ elt, rowIndex, columnIndex })))),
            (extraRender && extraRender(elt, rowIndex)) || null));
        if (renderRow) {
            return renderRow(rowIndex, row);
        }
        else {
            return React.createElement(React.Fragment, { key: `row-component-row-${rowIndex}` }, row);
        }
    })));
}
export const Rows = memo(RowsComponent);
export function Table(_a) {
    var { data, columns, withHeaders, extraRender, renderRow } = _a, containerProps = __rest(_a, ["data", "columns", "withHeaders", "extraRender", "renderRow"]);
    const gridTemplateColumns = useMemo(() => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""), [columns]);
    const headers = useMemo(() => withHeaders
        ? columns.reduce((acc, col, index) => [
            ...acc,
            React.createElement(React.Fragment, { key: `header-col-${index}` }, col.header ? col.header() : React.createElement("div", null)),
        ], [])
        : null, [withHeaders, columns]);
    return (React.createElement(Container, Object.assign({ gridTemplateColumns: gridTemplateColumns, gridAutoRows: "auto", columns: "none", alignItems: "center" }, containerProps),
        headers,
        React.createElement(Rows, { data: data, columns: columns, extraRender: extraRender, renderRow: renderRow })));
}
Table.Columns = Columns;
Table.ExtraRowContainer = ExtraRowContainer;
Table.RowContainer = RowContainer;
const memoTable = memo(Table);
memoTable.Columns = Columns;
memoTable.RowContainer = RowContainer;
memoTable.ExtraRowContainer = ExtraRowContainer;
export default memoTable;
//# sourceMappingURL=index.js.map