import React from 'react';
import { makeStyles } from '@material-ui/core';
import { DirectoryListItem } from './DirectoryListItem';
import { StatusChip } from '../status/StatusChip';
const useStyles = makeStyles((theme) => ({
    root: {}
}));
export const Directory = ({ data, success, warning, error, info, key, statusKey }) => {
    const classes = useStyles();
    const dataTransform = data.reduce((r, e) => {
        const alphabet = e.name[0];
        if (!r[alphabet])
            r[alphabet] = { alphabet, record: [e] };
        else
            r[alphabet].record.push(e);
        return r;
    }, {});
    const result = Object.values(dataTransform);
    return (React.createElement("div", { className: classes.root }, result.map((item) => {
        return (React.createElement(DirectoryListItem, { key: key, letter: item.alphabet }, item.record.map((item) => {
            return (React.createElement("div", { style: { marginBottom: 8 }, key: statusKey }, React.createElement(StatusChip, { success: success, warning: warning, error: error, info: info, label: item.name, status: item.status })));
        })));
    })));
};
//# sourceMappingURL=Directory.js.map