import { List, makeStyles } from '@material-ui/core';
import React from 'react';
import { ActionSummaryListItem } from '.';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        overflowY: 'scroll',
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    },
    itemContainer: {
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: 1,
        // paddingBottom: theme.spacing(2),
        width: '33%'
    }
}));
export const ActionSummaryListContainer = ({ items, selectedNode }) => {
    const classes = useStyles();
    function* keyGenerator() {
        let count = 0;
        while (true) {
            yield count++;
        }
    }
    const countGen = keyGenerator();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.itemContainer }, React.createElement(List, { disablePadding: true }, items
        .filter((item, i) => i % 3 === 0)
        .map((item) => (React.createElement(ActionSummaryListItem, Object.assign({ selectedNode: selectedNode }, item, { key: countGen.next().value })))))), React.createElement("div", { className: classes.itemContainer }, React.createElement(List, { disablePadding: true }, items
        .filter((item, i) => i % 3 === 1)
        .map((item) => (React.createElement(ActionSummaryListItem, Object.assign({ selectedNode: selectedNode }, item, { key: countGen.next().value })))))), React.createElement("div", { className: classes.itemContainer }, React.createElement(List, { disablePadding: true }, items
        .filter((item, i) => i % 3 === 2)
        .map((item) => (React.createElement(ActionSummaryListItem, Object.assign({ selectedNode: selectedNode }, item, { key: countGen.next().value }))))))));
};
//# sourceMappingURL=ActionSummaryListContainer.js.map