import React, { useState } from "react";
import { useSelector } from "react-redux";
import { Row, Column, List, ListItem, DropdownMenu, } from "@nimles/react-web-components";
import styled from "@emotion/styled";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTh } from "@fortawesome/free-solid-svg-icons";
import { navigate } from "./Link";
const ProductGroupsLabel = styled.div `
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 48px;
  padding: 0 8px;

  @media (min-width: ${(props) => props.theme.thresholds.sm}px) {
    padding: 0 32px;
  }
`;
const ProductGroupsIcon = styled(FontAwesomeIcon) `
  font-size: 20px;
`;
const Menu = styled.div `
  background: #fff;
  border: 1px solid lightgrey;
`;
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) });
    });
};
export const ProductGroupsMenu = () => {
    const [productGroup, setProductGroup] = useState();
    const productGroups = useSelector(({ publicProductGroups }) => {
        return publicProductGroups.values;
    });
    const filteredProductGroups = toTree(productGroups);
    return (<DropdownMenu align="left" menu={() => (<Menu>
          <Row>
            <Column>
              <List>
                {filteredProductGroups &&
                filteredProductGroups.map((pg) => {
                    const { name, uniqueName } = pg;
                    return (<ListItem active={pg === productGroup} key={uniqueName} onClick={() => navigate(`/${uniqueName}`)} onMouseOver={() => setProductGroup(pg)}>
                        {name}
                      </ListItem>);
                })}
              </List>
            </Column>
            {(productGroup === null || productGroup === void 0 ? void 0 : productGroup.children) ? (<Column style={{ borderLeft: "1px solid #ddd" }} flex={true}>
                <List>
                  {productGroup === null || productGroup === void 0 ? void 0 : productGroup.children.map((pg) => {
                    const { name, uniqueName } = pg;
                    return (<ListItem key={uniqueName} onClick={() => navigate(`/${uniqueName}`)}>
                        {name}
                      </ListItem>);
                })}
                </List>
              </Column>) : null}
          </Row>
        </Menu>)}>
      <ProductGroupsLabel>
        <ProductGroupsIcon icon={faTh}/>
      </ProductGroupsLabel>
    </DropdownMenu>);
};
//# sourceMappingURL=ProductGroupsMenu.jsx.map