import React from 'react';
import { ListItem, List } from '@nimles/react-web-components';
import { useSelector } from 'react-redux';
import { NavLink } from './Link';
const toTree = (productGroups, parent) => {
    return productGroups
        .filter((pg) => (parent ? pg.parentId === parent.id : !pg.parentId))
        .map((pg) => {
        return Object.assign(Object.assign({}, pg), { children: toTree(productGroups, pg) });
    });
};
const ProductGroup = ({ productGroup }) => {
    return (<ListItem key={productGroup.id}>
      <NavLink to={`/${productGroup.uniqueName}`}>{productGroup.name}</NavLink>
      <List>
        {productGroup.children.map((productGroup) => (<ProductGroup productGroup={productGroup}/>))}
      </List>
    </ListItem>);
};
export const ProductGroupList = () => {
    const productGroups = useSelector(({ publicProductGroups }) => publicProductGroups.values);
    const productGroupTree = toTree(productGroups);
    return (<List>
      {productGroupTree.map((productGroup) => (<ProductGroup productGroup={productGroup}/>))}
    </List>);
};
//# sourceMappingURL=ProductGroupList.jsx.map