import React from "react";
import { useSelector } from "react-redux";
import { lighten } from "polished";
import { Column } from "@nimles/react-web-components";
import { ShoppingCartMenu } from "./ShoppingCartMenu";
import styled from "@emotion/styled";
import { ProductGroupsMenu } from "./ProductGroupsMenu";
import { Element } from "./Element";
import { UserMenu } from "./UserMenu";
import { Brand } from "./Brand";
const StyledHeader = styled.header `
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 999;
  box-shadow: ${({ theme }) => theme.header.boxShadow};
  background-color: ${({ theme, backgroundColor }) => backgroundColor || theme.header.background};
  color: ${({ theme, color }) => color || theme.header.color};
`;
const Nav = styled.nav `
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
`;
const UpperNav = styled(Nav) `
  background-color: ${({ theme }) => theme.colors.primary.color};
  color: ${({ theme }) => theme.colors.primary.onColor};
  height: 60px;
`;
const LowerNav = styled(Nav) `
  background-color: ${({ theme }) => lighten(0.1, theme.colors.primary.color)};
  color: ${({ theme }) => theme.colors.primary.onColor};
  height: 50px;
`;
const HeaderList = styled.ul `
  flex: 1;
`;
export const Header = ({ children, layoutId, color, backgroundColor, }) => {
    const tenant = useSelector(({ publicTenants }) => publicTenants.selected);
    const layouts = useSelector(({ publicLayouts }) => publicLayouts.values);
    const layout = layouts &&
        ((layoutId && layouts.find((l) => l.id === layoutId)) ||
            layouts.find((l) => l.layoutType === "Header"));
    return (<StyledHeader color={color} backgroundColor={backgroundColor}>
      {layout
            ? layout.elements &&
                layout.elements.map((element) => (<Element key={element.id} tenant={tenant} element={element} root="Header"/>))
            : children || (<>
              <UpperNav>
                <Brand showName={true} showLogo={true}/>
                <HeaderList></HeaderList>
                <UserMenu />
              </UpperNav>
              <LowerNav>
                <ProductGroupsMenu />
                <Column flex></Column>
                <ShoppingCartMenu />
              </LowerNav>
            </>)}
    </StyledHeader>);
};
//# sourceMappingURL=Header.jsx.map