"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = void 0;
const react_1 = __importDefault(require("react"));
const react_redux_1 = require("react-redux");
const polished_1 = require("polished");
const react_web_components_1 = require("@nimles/react-web-components");
const ShoppingCartMenu_1 = require("./ShoppingCartMenu");
const styled_1 = __importDefault(require("@emotion/styled"));
const ProductGroupsMenu_1 = require("./ProductGroupsMenu");
const Element_1 = require("./Element");
const UserMenu_1 = require("./UserMenu");
const Brand_1 = require("./Brand");
const StyledHeader = styled_1.default.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_1.default.nav `
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
`;
const UpperNav = (0, styled_1.default)(Nav) `
  background-color: ${({ theme }) => theme.colors.primary.color};
  color: ${({ theme }) => theme.colors.primary.onColor};
  height: 60px;
`;
const LowerNav = (0, styled_1.default)(Nav) `
  background-color: ${({ theme }) => (0, polished_1.lighten)(0.1, theme.colors.primary.color)};
  color: ${({ theme }) => theme.colors.primary.onColor};
  height: 50px;
`;
const HeaderList = styled_1.default.ul `
  flex: 1;
`;
const Header = ({ children, layoutId, color, backgroundColor, }) => {
    const tenant = (0, react_redux_1.useSelector)(({ publicTenants }) => publicTenants.selected);
    const layouts = (0, react_redux_1.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_1.Element key={element.id} tenant={tenant} element={element} root="Header"/>))
            : children || (<>
              <UpperNav>
                <Brand_1.Brand showName={true} showLogo={true}/>
                <HeaderList></HeaderList>
                <UserMenu_1.UserMenu />
              </UpperNav>
              <LowerNav>
                <ProductGroupsMenu_1.ProductGroupsMenu>Sortiment</ProductGroupsMenu_1.ProductGroupsMenu>
                <react_web_components_1.Column flex></react_web_components_1.Column>
                <ShoppingCartMenu_1.ShoppingCartMenu />
              </LowerNav>
            </>)}
    </StyledHeader>);
};
exports.Header = Header;
//# sourceMappingURL=Header.jsx.map